/* Family HQ layout. Colours, fonts and rings come from hq-tokens.css; backdrops from hq-backdrops.css. */

:root{--barh:72px}
@media (max-width:640px){:root{--barh:64px}}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
body{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:100;padding:8px 12px;background:var(--panel)}
.skip:focus{left:8px;top:8px}
small{display:block;color:var(--muted);font-size:12px;font-weight:400}
#app{position:relative;height:100%;overflow:hidden;background:var(--appbg)}

/* Reduced motion is decided by hq-motion.js (the person's setting, then their device) and set here */
html[data-rm="1"] *{animation:none!important}
html[data-rm="1"] .flyer{display:none!important}
html[data-rm="1"] .fish{left:20%}

/* header: the same on every Family HQ page */
.bar{position:absolute;left:0;right:0;top:0;z-index:30;height:var(--barh);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 28px;background:color-mix(in srgb,var(--bar) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;min-width:190px}
.bt{display:flex;flex-direction:column;gap:3px}
.bt b{font:500 14px var(--font-display)}
.bt span{font:400 10px var(--font-mono);letter-spacing:.16em;color:var(--muted)}
.appnav{display:flex;align-items:center;justify-content:center;flex:1;gap:clamp(8px,1.8vw,22px)}
.tools{display:flex;align-items:center;justify-content:flex-end;min-width:190px}
.icon-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line3)}
.icon-btn:hover,.icon-btn[aria-current]{border-color:var(--fg)}
.qa{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%}
.qa .hq-ring{width:40px;height:40px;transition:transform .2s,box-shadow .2s;box-shadow:0 0 calc(6px + 16px*var(--k)) color-mix(in srgb,var(--col) calc(30% + 50%*var(--k)),transparent)}
.qa.nb .hq-ring{border-style:dashed}
.qa:hover .hq-ring,.qa:focus-visible .hq-ring{transform:scale(1.1);box-shadow:0 0 28px color-mix(in srgb,var(--col) 85%,transparent)}
.qa .dot{position:absolute;top:3px;right:3px;width:9px;height:9px;border-radius:50%;background:var(--col);box-shadow:0 0 8px var(--col);border:2px solid var(--bar)}
.qa .ql{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:4px;padding:3px 8px;border-radius:6px;background:var(--panel);border:1px solid var(--line);font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.qa:hover .ql,.qa:focus-visible .ql{opacity:1}
@media (max-width:900px){.brand .bt{display:none}.brand{min-width:0}}
@media (max-width:480px){
  .bar{padding:0 12px}
  .bar{gap:4px}
  .brand{flex:none;width:44px;height:44px;justify-content:center}  /* the mark alone, as the home button on the left */
  .appnav{justify-content:center;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
  .appnav::-webkit-scrollbar{display:none}
  .tools{flex:none}
  .qa{width:38px}
  .qa .hq-ring{width:34px;height:34px}
  .qa .hq-ring svg{width:16px;height:16px}
  .tools{min-width:0}
}

/* rings */
.hq-ring{overflow:hidden;flex:none}
.hq-ring img{display:block;width:100%;height:100%;object-fit:cover}
.hq-ring.lg,.hq-ring.xl{width:96px;height:96px;font-size:34px;border-width:3px}
.hq-ring.sm{width:40px;height:40px;font-size:15px}
.hq-ring.dash{border-style:dashed}
@media (max-width:640px){.hq-ring.lg{width:78px;height:78px;font-size:28px}.hq-ring.xl{width:72px;height:72px;font-size:26px}}

/* page body */
#main{position:absolute;left:0;right:0;top:var(--barh);bottom:0;z-index:5;overflow-y:auto;padding:26px 28px 56px}
@media (max-width:640px){#main{padding:14px 14px 40px}}
.wrap{max-width:1120px;margin:0 auto}
.wrap.narrow{max-width:760px}
.pagetitle{margin:6px 0 18px;font:500 clamp(24px,4vw,34px) var(--font-display);line-height:1.15}
.notice{max-width:1120px;margin:0 auto 16px;padding:12px 16px;border-radius:14px;background:color-mix(in srgb,var(--panel) 90%,transparent);border:1px solid var(--line3);border-left:5px solid var(--c-livia)}
.notice-error{border-left-color:var(--c-georgia)}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--line3);color:var(--soft);font:400 10.5px var(--font-mono);letter-spacing:.08em;white-space:nowrap}
.pill.ex{color:var(--c-link)}
.hint{margin:6px 0 12px;color:var(--muted);font-size:13px;line-height:1.45}

/* launcher: welcome card, then feed and tiles */
.hello{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:16px 24px 16px 16px;background:color-mix(in srgb,var(--panel) 84%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--line2);border-radius:24px}
.hello-av{flex:none;display:block;border-radius:50%}
.hello-text{flex:1;min-width:180px}
.eyebrow{font:400 11px var(--font-mono);letter-spacing:.14em;color:var(--muted)}
.hello h1{margin:8px 0 6px;font:500 clamp(26px,4vw,36px) var(--font-display);line-height:1.15}
.hello p{margin:0;color:var(--soft);font-size:15px}
@media (max-width:640px){.hello{gap:14px;padding:12px 16px 12px 12px}.hello h1{font-size:24px}}
.cols{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 28px;margin-top:20px}
.feedcol,.tiles{flex:1 1 100%;min-width:0}
.tiles{display:flex;flex-direction:column;gap:14px}
@media (min-width:960px){
  .tiles{order:1;flex:999 1 560px}
  .feedcol{order:2;flex:1 1 320px;max-width:340px}
}

.tile{display:flex;flex-direction:column;gap:10px;padding:10px 10px 12px 20px;background:color-mix(in srgb,var(--panel) 84%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--line2);border-radius:22px;box-shadow:0 0 calc(8px + 28px*var(--k)) color-mix(in srgb,var(--col) calc(10% + 40%*var(--k)),transparent)}
.tile.nb{border-style:dashed;border-color:var(--line3)}
.noglow .tile{box-shadow:none}
/* live attention (assets/live.js): a text badge in the tile header, so the level never rests on colour alone */
.live-badge{flex:none;color:var(--fg);border-color:var(--col)}
.live-badge[hidden]{display:none}
.qa .cnt{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:9px;background:var(--panel);color:var(--fg);border:2px solid var(--col);font:600 11px/14px system-ui,sans-serif;font-style:normal;text-align:center}
.qa .cnt.l2{background:var(--col);color:var(--bar)}
.live-badge.l2{background:color-mix(in srgb,var(--col) 24%,transparent);font-weight:500}
.livestat{margin:14px 0 0;text-align:center;color:var(--muted);font:400 11px var(--font-mono);letter-spacing:.06em}
.livestat[hidden]{display:none}
.checksum{margin:0 0 10px;font-weight:600}
.check{align-items:flex-start}
.cstate{flex:none;min-width:52px;box-sizing:border-box;text-align:center;padding:4px 8px;border-radius:999px;border:1px solid currentColor;font:500 11px var(--font-mono);letter-spacing:.08em;color:var(--muted)}
.check-pass .cstate{color:#5FD38D}
.check-fail .cstate{color:#FF4D6D}
.check-warn .cstate{color:#F2C14E}
.check-test .cstate{color:var(--c-james)}
.thead{display:flex;align-items:center;gap:10px;min-height:44px}
.tname{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tname h2{margin:0;font:500 19px/1.15 var(--font-display)}
.tsub{font:400 11px var(--font-mono);color:var(--muted)}
.openbtn{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:22px;background:var(--fg);color:var(--bg);font:600 14px var(--font-body)}
.openbtn:hover{opacity:.9}
.chev{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line3);background:none;cursor:pointer}
.chev:hover{border-color:var(--fg)}
.chev svg{transition:transform .2s}
.tile.open .chev svg{transform:rotate(180deg)}
.lines{margin:0;padding:0 10px 4px 0;list-style:none;display:flex;flex-direction:column;gap:10px}
.tile:not(.open) .line.x{display:none}
.line{display:flex;align-items:flex-start;gap:12px;font-size:15px}
.line .dot{flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--col);box-shadow:0 0 8px var(--col)}
.line .body{flex:1;min-width:0;display:flex;justify-content:space-between;gap:10px}
.line .body.stack{flex-direction:column;justify-content:flex-start;gap:2px}
.line .txt{min-width:0}
.line .when{flex:none;margin-top:3px;font:400 11px var(--font-mono);color:var(--muted)}
.line .lbl{font:400 11px var(--font-mono);color:var(--col)}
.tile:not(.open) .line .txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fallback{margin:0;padding:0 10px 6px 0;color:var(--soft);font-size:14px}

/* sign-in */
.login{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;padding:8px 0 24px;text-align:center}
.login h1{margin:0;font:500 clamp(24px,4vw,38px) var(--font-display);line-height:1.15}
.lgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 36px;max-width:780px}
.lav{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:108px;min-height:44px;padding:8px;border-radius:18px}
.lav .hq-ring{transition:transform .2s,box-shadow .2s}
.lav:hover .hq-ring,.lav:focus-visible .hq-ring{transform:scale(1.07);box-shadow:0 0 38px color-mix(in srgb,var(--col) 80%,transparent)}
.lav b{font-size:15px;font-weight:600}
@media (max-width:640px){.lav{min-width:92px}.lgrid{gap:20px 14px}}
.loginnote p{margin:0;color:var(--soft)}
.loginnote .sub{margin-top:6px;font-size:13px;color:var(--muted)}
.pw{display:flex;flex-direction:column;gap:12px;width:min(340px,100%);text-align:left}
.pw label{font-size:13px;color:var(--soft)}
.login .hint{max-width:42ch;text-align:center}

/* forms and controls */
input[type=text],input[type=password],input[type=url],input[type=number],select{width:100%;min-height:48px;padding:0 14px;border-radius:14px;border:1px solid var(--line3);background:color-mix(in srgb,var(--bar) 70%,transparent);color:var(--fg)}
input[type=number]{width:96px;text-align:center}
.stack{display:flex;flex-direction:column;gap:10px;max-width:30rem}
.stack label{font-size:13px;color:var(--soft)}
.stack .btn,.pw .btn{align-self:flex-start}
.pw .btn{align-self:stretch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:22px;border:1px solid var(--line3);background:none;font:600 14px var(--font-body);cursor:pointer;color:var(--fg)}
.btn:hover{border-color:var(--fg)}
.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.danger{color:var(--c-georgia);border-color:var(--c-georgia)}
.btn.sq{width:44px;padding:0}
.linkbtn{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--soft);text-decoration:underline;background:none;border:0;cursor:pointer}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
form.inline{display:inline}
.choices{margin:0;padding:6px 14px 10px;border:1px solid var(--line2);border-radius:14px}
.choices legend{padding:0 6px;font-size:13px;color:var(--soft)}
.choice{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:8px 0;font-size:14px;color:var(--fg)}
.choice input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--fg)}
.choice span{display:flex;flex-direction:column}
.switch{position:relative;flex:none;display:inline-block;width:48px;height:44px}
.switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.switch i{position:absolute;right:2px;top:10px;width:44px;height:24px;border-radius:12px;background:var(--line3);transition:background .2s;pointer-events:none}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--soft);transition:transform .2s}
.switch input:checked + i{background:var(--c-livia)}
.switch input:checked + i::after{transform:translateX(20px);background:var(--bg)}
.switch input:focus-visible + i{outline:2px solid var(--fg);outline-offset:2px}
.switchrow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-size:14px;color:var(--fg)}

/* settings and admin panels */
.panel{margin:0 0 18px;padding:20px;background:color-mix(in srgb,var(--panel) 84%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--line2);border-radius:22px}
.panel h1,.panel h2{margin:0 0 6px;font:500 18px var(--font-display);line-height:1.2}
.panel h2 + .hint{margin-top:2px}
.plain{margin:0 0 14px;padding:0;list-style:none}
.row{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.grow{flex:1;min-width:0;font-size:14px}
.mini{flex:none;display:inline-flex}
.mini .hq-ring{width:34px;height:34px}
.avatar-edit{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin:10px 0 16px}
.av-actions{display:flex;flex:1;min-width:220px;flex-direction:column;align-items:flex-start;gap:10px}
.av-actions .hint{margin:0}
.cropper{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0 0 18px;padding:16px;border:1px dashed var(--line3);border-radius:18px;text-align:center}
.crop-frame{width:246px;height:246px;overflow:hidden;border-radius:50%;border:3px solid var(--col);box-shadow:0 0 28px color-mix(in srgb,var(--col) 70%,transparent)}
.crop-frame canvas{display:block;width:240px;height:240px;cursor:grab;touch-action:none}
.zoom{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--soft)}
.zoom input{width:200px;accent-color:var(--fg)}
.skinlist{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;border:0}
.skin{position:relative;display:block;cursor:pointer}
.skin input{position:absolute;opacity:0}
.skin-card{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line2);background:color-mix(in srgb,var(--bar) 70%,transparent)}
.skin input:checked + .skin-card{border-color:var(--fg)}
.skin input:focus-visible + .skin-card{outline:2px solid var(--fg);outline-offset:2px}
.skin-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.skin-name b{display:block;font:500 14px var(--font-display)}
.dots{display:flex;gap:5px}
.dots i{width:12px;height:12px;border-radius:50%;border:1px solid var(--line3)}
.meter{display:flex;align-items:center;gap:10px}
.segs{display:flex;gap:3px}
.segs i{width:18px;height:6px;border-radius:3px;background:var(--line3)}
.mw{font:500 11px var(--font-mono);letter-spacing:.08em}
.skin-note{font-size:12.5px;line-height:1.4;color:var(--soft)}
.fpsrow{display:flex;justify-content:space-between;margin:12px 4px 0;font:400 11px var(--font-mono);color:var(--muted)}
.fpsrow b{font-weight:500;color:var(--fg)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:22px;border:1px solid var(--line3);font-size:13px;font-weight:600}
.chip input:checked + span{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip input:focus-visible + span{outline:2px solid var(--fg);outline-offset:2px}
.pair{display:flex;flex-wrap:wrap;gap:14px;margin:14px 0}
.pair label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--soft)}
.lines-table{width:100%;margin:8px 0 16px;border-collapse:collapse}
.lines-table th,.lines-table td{padding:6px 4px;border-top:1px solid var(--line);text-align:center}
.lines-table thead th{border-top:0;font:400 11px var(--font-mono);letter-spacing:.12em;color:var(--muted)}
.lines-table th[scope=row]{text-align:left;font-weight:500;font-size:14px}
details.remove summary{display:flex;align-items:center;min-height:44px;padding:0 8px;cursor:pointer;color:var(--soft)}
details.remove form{padding:0 0 8px}
.installrow{margin:22px 0 0;text-align:center}
.installrow:empty{display:none}
.installbtn{font-size:13px;color:var(--soft)}
.installhint{position:relative;display:inline-block;max-width:34ch;padding:10px 44px 10px 16px;border:1px solid var(--line3);border-radius:16px;background:color-mix(in srgb,var(--panel) 84%,transparent);text-align:left;font-size:13px;color:var(--soft)}
.installhint p{margin:0}
.installhint b{color:var(--fg);font-weight:600}
.hintclose{position:absolute;top:0;right:0;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:none;color:var(--soft);font-size:22px;line-height:1;cursor:pointer}
#toast{position:absolute;left:50%;bottom:24px;z-index:60;transform:translateX(-50%);padding:10px 18px;border-radius:20px;background:var(--panel);border:1px solid var(--line3);font:400 12px var(--font-mono);opacity:0;pointer-events:none;transition:opacity .25s}
#toast.show{opacity:1}

/* forest owl sits on the right on every page except sign-in, so it never covers the greeting */
body:not(.page-login) .owl{left:auto;right:max(16px,2%);top:calc(var(--barh) + 150px);width:96px}
@media (max-width:760px){body:not(.page-login) .owl{width:72px;top:calc(var(--barh) + 110px)}}

/* family Chat: one flat stream, newest at the bottom, composer pinned under it */
.feed .stream{display:flex;flex-direction:column;gap:10px;padding-bottom:14px}
.feed .empty{text-align:center}
.post{display:flex;gap:10px;padding:12px 14px 6px 12px;background:color-mix(in srgb,var(--panel) 84%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--line2);border-left:3px solid var(--col);border-radius:18px;scroll-margin-top:12px}
.post.own{background:color-mix(in srgb,var(--panel2) 84%,transparent)}
.post:target{box-shadow:0 0 22px color-mix(in srgb,var(--col) 55%,transparent)}
.p-av{flex:none}
.p-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.p-head{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:6px}  /* name over time on the left; reactions and the "..." stay on the right, never wrapping below */
.p-who{display:flex;flex-direction:column;gap:1px;min-width:0}
.p-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.p-head .p-react{margin-left:auto;align-self:center;justify-content:flex-end;min-width:0}
.p-head .p-react:not(:empty)+.p-menu{margin-left:0}
.p-head b{font:500 14px var(--font-display);color:var(--col)}
.p-head time{font:400 11px var(--font-mono);color:var(--muted)}
.p-body{font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.p-body a,.quote{text-decoration:underline;text-underline-offset:2px}
.quote{display:block;padding:6px 10px;border-left:3px solid var(--line3);border-radius:4px 10px 10px 4px;background:color-mix(in srgb,var(--bar) 70%,transparent);font-size:13px;line-height:1.4;color:var(--soft);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quote b{color:var(--fg);font-weight:600}
.p-photo{display:block;max-width:100%;line-height:0}
.p-photo img{display:block;max-width:100%;max-height:420px;width:auto;height:auto;border-radius:14px;border:1px solid var(--line2)}
.p-link{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line3);border-radius:14px;background:color-mix(in srgb,var(--bar) 70%,transparent);text-decoration:none}
.p-link:hover{border-color:var(--fg)}
.p-link .site{font:400 11px var(--font-mono);letter-spacing:.06em;color:var(--muted)}
.p-link b{font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.p-react{display:flex;flex-wrap:wrap;gap:4px}
.p-react:empty{display:none}
.rx{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:44px;min-height:44px;padding:0 8px;border-radius:22px;border:1px solid transparent;background:none;cursor:pointer;font-size:16px}
.p-react .rx{min-width:0;min-height:30px;padding:0 8px;gap:3px;font-size:14px;border-color:var(--line2)}
.rx i{font:500 12px var(--font-mono);font-style:normal;color:var(--soft)}
.rx:hover{border-color:var(--line3)}
.rx.on{border-color:var(--col);background:color-mix(in srgb,var(--col) 16%,transparent)}
.rx:disabled{opacity:.6}
.p-head{position:relative}
.p-menu{position:relative;margin-left:auto;flex:none;align-self:center}
.morebtn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:32px;padding:0 8px;border:0;border-radius:16px;background:none;color:var(--soft);font:600 18px/1 var(--font-body,inherit);letter-spacing:1px;cursor:pointer}
.morebtn:hover,.post.menu-open .morebtn{background:color-mix(in srgb,var(--fg) 12%,transparent);color:var(--fg)}
/* the menu: hidden until the "..." is pressed, then a short list under it, at the right */
.p-acts{display:none;position:absolute;right:0;top:100%;z-index:25;min-width:190px;max-width:min(300px,calc(100vw - 32px));flex-direction:column;align-items:stretch;gap:0;padding:6px;border:1px solid var(--line3);border-radius:14px;background:var(--panel);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.post.menu-open .p-acts{display:flex}
.p-acts>.linkbtn,.p-acts form.inl .linkbtn,.p-acts summary{display:block;width:100%;min-height:44px;padding:0 12px;text-align:left;line-height:44px;border-radius:10px}
.p-acts>.linkbtn:hover,.p-acts form.inl .linkbtn:hover,.p-acts summary:hover{background:color-mix(in srgb,var(--fg) 10%,transparent)}
.p-acts details.remove{display:block}
.post:has(#picker:not([hidden])),.post.menu-open{position:relative;z-index:8}
.mutemark{display:inline-flex;vertical-align:-2px;margin-left:5px;color:var(--muted)}

.newmark{display:flex;align-items:center;gap:12px;font:400 11px var(--font-mono);letter-spacing:.14em;color:var(--c-link);scroll-margin-top:12px}
.newmark::before,.newmark::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--c-link) 50%,transparent)}
.notice-new{margin:0 0 12px;text-align:center}
.composer{position:sticky;bottom:0;z-index:6;margin:6px 0 0;padding:10px;border-radius:22px}
.c-row{display:flex;align-items:flex-end;gap:8px}
.c-row textarea{flex:1;min-width:0;min-height:48px;max-height:160px;padding:12px 14px;resize:none;border-radius:24px;border:1px solid var(--line3);background:color-mix(in srgb,var(--bar) 70%,transparent);color:var(--fg);font:inherit;line-height:1.35}
.c-row label.btn:has(+ input:focus-visible){outline:2px solid var(--fg);outline-offset:2px}
.c-reply,.c-photo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 4px 8px;padding:6px 12px;border-left:3px solid var(--c-link);border-radius:4px 12px 12px 4px;background:color-mix(in srgb,var(--bar) 70%,transparent);font-size:13px;color:var(--soft)}
.c-reply span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-reply em{font-style:normal}
.c-photo img{display:block;width:64px;height:64px;object-fit:cover;border-radius:10px}
.c-note{margin:0 4px 8px;color:var(--c-georgia)}
@media (max-width:640px){.post{padding:10px 10px 4px 10px}.feed .pagetitle{margin-bottom:10px}}

/* chat rooms, day dividers, mentions, albums, the viewer and the rest of the richer chat */
.rooms{display:flex;gap:6px;overflow-x:auto;margin:0 0 12px;padding:2px 0 6px;scrollbar-width:thin}
.room{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:22px;border:1px solid var(--line3);background:color-mix(in srgb,var(--panel) 84%,transparent);color:var(--fg);text-decoration:none;font-size:14px;white-space:nowrap}
.room:hover{border-color:var(--fg)}
.room.on{border-color:var(--c-link);background:color-mix(in srgb,var(--c-link) 18%,transparent);font-weight:600}
.room.add{border-style:dashed;color:var(--soft)}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--c-link);color:var(--bg,#111);font:600 11px var(--font-mono)}
.badge.at{background:var(--c-georgia)}
.roombar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:0 0 10px;font-size:14px}
.rb-links{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.rb-links a,.search summary{min-height:44px;display:inline-flex;align-items:center;color:var(--soft);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.search form{display:flex;gap:8px;margin:0 0 8px}
.search input[type=search]{flex:1;min-width:0;min-height:44px;padding:0 14px;border-radius:22px;border:1px solid var(--line3);background:color-mix(in srgb,var(--bar) 70%,transparent);color:var(--fg);font:inherit}
.pinbar{display:block;margin:0 0 10px;padding:8px 14px;border:1px solid var(--line3);border-left:3px solid var(--c-link);border-radius:4px 14px 14px 4px;background:color-mix(in srgb,var(--panel) 84%,transparent);color:var(--fg);text-decoration:none;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pinmark,.pintag{font:400 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-link)}
.day{display:flex;justify-content:center;margin:6px 0 -2px}
.day span{padding:3px 12px;border-radius:12px;background:color-mix(in srgb,var(--panel) 84%,transparent);border:1px solid var(--line2);font:400 11px var(--font-mono);letter-spacing:.08em;color:var(--soft)}
.edited{font:400 11px var(--font-mono);color:var(--muted)}
.mention{padding:0 4px;border-radius:6px;background:color-mix(in srgb,var(--c-georgia) 24%,transparent);color:var(--fg);font-weight:600}
.p-body.big{font-size:40px;line-height:1.15}
.post.hl{box-shadow:0 0 26px color-mix(in srgb,var(--col) 65%,transparent)}
.post.pinned{border-top-color:var(--c-link)}
.alb{display:grid;gap:4px;max-width:420px}
.alb .ph{display:block;position:relative;line-height:0;overflow:hidden;border-radius:12px;border:1px solid var(--line2)}
.alb .ph img{display:block;width:100%;height:100%;object-fit:cover}
.alb.n1{display:block}
.alb.n1 .ph img{width:auto;height:auto;max-width:100%;max-height:420px;object-fit:contain}
.alb.n2,.alb.n4{grid-template-columns:1fr 1fr}
.alb.n3{grid-template-columns:1fr 1fr}
.alb.n3 .ph:first-child{grid-column:1 / 3}
.alb.n2 .ph,.alb.n4 .ph,.alb.n3 .ph:not(:first-child){aspect-ratio:1 / 1}
.alb.n3 .ph:first-child{aspect-ratio:2 / 1}
.alb .ph.x{display:none}
.alb .ph[data-more]::after{content:attr(data-more);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);color:#fff;font:600 22px var(--font-display)}
.seenby{margin:-4px 6px 8px;text-align:right;font:400 11px var(--font-mono);color:var(--muted)}
.older{align-self:center}
.jump{position:fixed;right:16px;bottom:110px;z-index:8;box-shadow:0 4px 18px rgba(0,0,0,.4)}
.c-photos{display:flex;gap:8px;overflow-x:auto;margin:0 4px 8px}
.c-ph{position:relative;flex:none}
.c-ph img{display:block;width:64px;height:64px;object-fit:cover;border-radius:10px}
.c-x{position:absolute;top:-6px;right:-6px;width:28px;height:28px;border-radius:14px;border:1px solid var(--line3);background:var(--panel);color:var(--fg);font-size:16px;line-height:1;cursor:pointer}
.c-ments{display:flex;flex-wrap:wrap;gap:6px;margin:0 4px 8px}
.chip{min-height:36px;padding:0 12px;border-radius:18px;border:1px solid var(--line3);background:color-mix(in srgb,var(--c-georgia) 18%,transparent);color:var(--fg);font:inherit;font-size:13px;cursor:pointer}
.picker{position:absolute;left:0;right:0;top:100%;z-index:20;margin-top:4px;padding:6px;border:1px solid var(--line3);border-radius:16px;background:var(--panel);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.pk-quick{display:flex;align-items:center;justify-content:space-between;gap:2px}
.pk-all{display:none;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:2px;max-height:200px;overflow-y:auto;margin-top:4px;padding-top:4px;border-top:1px solid var(--line2)}
.picker.all .pk-all{display:grid}
.picker .pk-more{font-size:20px;color:var(--soft)}
.picker[hidden]{display:none}
.picker button{min-height:44px;border:0;border-radius:10px;background:none;font-size:22px;cursor:pointer}
.picker button:hover{background:color-mix(in srgb,var(--fg) 12%,transparent)}
.rx.more{color:var(--soft);font-size:18px}
.st.on{color:var(--c-link);font-weight:600}
.p-acts form.inl{display:inline-block;margin:0}
.p-acts details.edit form{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.p-acts details.edit textarea{min-height:80px;padding:10px 12px;border-radius:14px;border:1px solid var(--line3);background:color-mix(in srgb,var(--bar) 70%,transparent);color:var(--fg);font:inherit}
.whobubble{position:fixed;left:50%;bottom:120px;z-index:90;transform:translateX(-50%);max-width:88vw;padding:10px 16px;border-radius:20px;background:var(--panel);border:1px solid var(--line3);font-size:14px}
.whobubble[hidden]{display:none}
.viewer{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.92)}
.viewer img{max-width:100%;max-height:100%;object-fit:contain}
.v-btn{position:absolute;width:52px;height:52px;border-radius:26px;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.v-close{top:max(12px,env(safe-area-inset-top));right:12px}
.v-prev{left:10px;top:50%;margin-top:-26px}
.v-next{right:10px;top:50%;margin-top:-26px}
.viewer.single .v-prev,.viewer.single .v-next{display:none}
.v-bar{position:absolute;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:18px;font:400 13px var(--font-mono);color:#fff}
.v-save{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:22px;background:rgba(255,255,255,.2);color:#fff;text-decoration:none}
.result{display:flex;flex-direction:column;gap:2px;margin:0 0 8px;padding:10px 12px;border:1px solid var(--line2);border-radius:14px;color:var(--fg);text-decoration:none}
.result:hover{border-color:var(--fg)}
.r-top{font-size:13px;color:var(--soft)}
.r-top b{color:var(--fg)}
.r-top time{font:400 11px var(--font-mono);color:var(--muted)}
.r-body{font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.roomform{display:flex;flex-direction:column;gap:14px}
.roomform .field{display:flex;flex-direction:column;gap:6px}
.roomform .field input{min-height:48px;padding:0 14px;border-radius:14px;border:1px solid var(--line3);background:color-mix(in srgb,var(--bar) 70%,transparent);color:var(--fg);font:inherit}
fieldset.pick{margin:0;padding:10px 14px;border:1px solid var(--line3);border-radius:14px}
fieldset.pick legend{padding:0 6px;font-size:13px;color:var(--soft)}
.pickrow{display:flex;align-items:center;gap:10px;min-height:44px}
.pickrow input{width:22px;height:22px}

/* polls and the Photos tab */
.poll{display:flex;flex-direction:column;gap:6px;max-width:420px}
.pl-opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 14px;overflow:hidden;border-radius:14px;border:1px solid var(--line3);background:color-mix(in srgb,var(--bar) 70%,transparent);color:var(--fg);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.pl-opt::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--pct,0%);background:color-mix(in srgb,var(--col) 26%,transparent)}
.pl-opt>*{position:relative}
.pl-opt.on{border-color:var(--col);font-weight:600}
.pl-opt:disabled{opacity:.6}
.pl-opt i{font:500 12px var(--font-mono);font-style:normal;color:var(--soft)}
.pl-note{margin:0;font:400 11px var(--font-mono);color:var(--muted)}
.c-poll{display:flex;flex-direction:column;gap:8px;margin:0 4px 8px;padding:10px 12px;border-left:3px solid var(--c-link);border-radius:4px 12px 12px 4px;background:color-mix(in srgb,var(--bar) 70%,transparent)}
.c-poll input[type=text]{min-height:44px;padding:0 14px;border-radius:22px;border:1px solid var(--line3);background:color-mix(in srgb,var(--panel) 84%,transparent);color:var(--fg);font:inherit}
.c-poll #c-pollmore{display:flex;flex-direction:column;gap:8px}
.c-pollrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.photomonth{margin:18px 0 8px;font:500 14px var(--font-display)}
.photogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:4px}
.photogrid .ph{display:block;aspect-ratio:1 / 1;overflow:hidden;border-radius:10px;line-height:0}
.photogrid .ph img{display:block;width:100%;height:100%;object-fit:cover}