.av-0{background:#0b6e4f;color:#ffffff}.av-1{background:#1d4ed8;color:#ffffff}.av-2{background:#7c3aed;color:#ffffff}.av-3{background:#b4235a;color:#ffffff}.av-4{background:#9a3412;color:#ffffff}.av-5{background:#0e7490;color:#ffffff}.av-6{background:#4d7c0f;color:#ffffff}.av-7{background:#475569;color:#ffffff}:root{color-scheme:dark;--bg:#0f1115;--surface:#171a21;--text:#e7e9ea;--text-muted:#9aa4ae;--border:#2a3038;--border-strong:#8b96a1;--accent:#4fd1a5;--on-accent:#0f1115;--focus:#8ab4f8;--danger:#f2b8b5;--like:#f48fb1;--highlight-bg:#14221d;}@media (prefers-color-scheme: light){:root:not([data-theme=dark]){color-scheme:light;--bg:#ffffff;--surface:#f5f7f8;--text:#0f1419;--text-muted:#536471;--border:#e1e8ed;--border-strong:#6b7780;--accent:#0b6e4f;--on-accent:#ffffff;--focus:#1a5fb4;--danger:#b3261e;--like:#b4235a;--highlight-bg:#eef6f2;}}:root[data-theme=light]{color-scheme:light;--bg:#ffffff;--surface:#f5f7f8;--text:#0f1419;--text-muted:#536471;--border:#e1e8ed;--border-strong:#6b7780;--accent:#0b6e4f;--on-accent:#ffffff;--focus:#1a5fb4;--danger:#b3261e;--like:#b4235a;--highlight-bg:#eef6f2;}:root[data-theme=dark]{color-scheme:dark;--bg:#0f1115;--surface:#171a21;--text:#e7e9ea;--text-muted:#9aa4ae;--border:#2a3038;--border-strong:#8b96a1;--accent:#4fd1a5;--on-accent:#0f1115;--focus:#8ab4f8;--danger:#f2b8b5;--like:#f48fb1;--highlight-bg:#14221d;}
/* Timeline — calm, clear, accessible. Theme tokens are injected before this file. */
*,*::before,*::after{box-sizing:border-box}
/* header height, shared by the sticky header, the pinned banner and anchor scrolling */
:root{--header-h:calc(44px + .8rem + 1px);--banner-h:0px}
/* the wide layout's measures: the grid and what is fixed over its middle column share them */
:root{--shell-max:75rem;--shell-pad:1rem;--side-w:13rem;--aside-w:20rem;--col-gap:1.5rem}
:root:has(.verify-banner){--banner-h:7rem}
@media (max-width:40rem){:root:has(.verify-banner){--banner-h:4.5rem}}
/* quick taps (menu, like) never zoom the page; pinch zoom stays */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + var(--banner-h) + .5rem);scroll-padding-bottom:7rem}
/* author styles beat the UA [hidden] rule (.btn{display:inline-flex}…): keep it hidden */
[hidden]{display:none!important}
/* The phone's own font and text size: on iPhone `-apple-system-body` follows the size
   chosen in Settings (Dynamic Type); elsewhere the browser's text-size setting scales
   the root. Text is a bit smaller than the default (≈15px at standard size), like
   Threads; every text size below is relative (em) so it follows. */
:root{--fs:.9375rem}
@supports (font:-apple-system-body){html{font:-apple-system-body}:root{--fs:.88rem}}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,system-ui,"Segoe UI",Roboto,"Noto Sans",Ubuntu,Cantarell,sans-serif;font-size:var(--fs);line-height:1.45}
/* iOS Safari zooms into any field under 16px when it gets focus */
input,textarea,select{font-size:max(16px,1em)!important}
a{color:var(--accent);text-underline-offset:.15em}
/* the ring follows each element's own shape (round buttons stay round) */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* no grey box from the phone on tap: our own press feedback below */
a,button,summary,label,[role=button]{-webkit-tap-highlight-color:transparent}
.act:active,.icon-btn:active,.bottom-nav a:active{background:var(--surface);transform:scale(.92)}
@media (prefers-reduced-motion:no-preference){.act,.icon-btn{transition:transform .12s ease-out,background-color .12s}}
.skip{position:absolute;left:.5rem;top:-3rem;z-index:100;background:var(--accent);color:var(--on-accent);padding:.6rem 1rem;border-radius:.5rem}
.skip:focus{top:.5rem}
.muted{color:var(--text-muted)}
h1{font-size:1.4em;line-height:1.25;margin:.5rem 0 1rem}
h2{font-size:1.1em}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:minmax(0,1fr);max-width:var(--shell-max);margin:0 auto}
header.top{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:.4rem 1rem;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
header.top .brand{grid-column:2}
header.top .top-actions{grid-column:3;justify-self:end;display:flex;align-items:center;gap:.15rem}
header.top .search-link[aria-current=page]{background:var(--surface)}
.brand{font-weight:800;font-size:1.25em;letter-spacing:-.02em;color:var(--text);text-decoration:none;padding:.5rem 0;min-height:44px;display:inline-flex;align-items:center;gap:.55rem}
.brand-mark{flex:none}
.wordmark{flex:none;width:auto;height:1.5rem;overflow:visible}
.wordmark .dot{fill:#14a374;stroke:none}
.wordmark .hollow{stroke:var(--bg);stroke-width:0}
@media (forced-colors:active){.wordmark .hollow{display:none}}
/* opening splash: the page is already underneath; it covers it for under a second */
.splash{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;background:var(--bg);color:var(--text);animation:splash-out .28s ease-in .75s forwards}
.splash .wordmark{height:2.6rem;animation:splash-glow .75s ease-in-out both}
.splash-orbit{position:relative;width:22px;height:22px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--text) 14%,transparent);animation:splash-turn .9s cubic-bezier(.5,.1,.5,.9) infinite}
.splash-orbit::after{content:"";position:absolute;top:-4.5px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#14a374}
@keyframes splash-out{to{opacity:0;visibility:hidden}}
@keyframes splash-glow{0%{opacity:.2}55%{opacity:1}100%{opacity:.85}}
@keyframes splash-turn{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.splash{display:none}}
main{min-width:0;padding:0 0 9rem;outline:none;min-height:100vh}
.side-nav,.side-col{display:none}
.bottom-nav{position:fixed;left:.75rem;right:.75rem;bottom:calc(.6rem + env(safe-area-inset-bottom));z-index:20;max-width:28rem;margin:0 auto;border:1px solid var(--border);border-radius:999px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 30px rgb(0 0 0/.12)}
.bottom-nav ul,.side-nav ul{list-style:none;margin:0;padding:0;display:flex}
.bottom-nav li{flex:1}
.bottom-nav a,.bottom-nav .link-btn{display:flex;align-items:center;justify-content:center;min-height:56px;color:var(--text-muted);text-decoration:none}
.bottom-nav .icon{width:1.6rem;height:1.6rem}
.sr-only,.bottom-nav .nav-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bottom-nav a[aria-current=page]{margin:.3rem .15rem;min-height:calc(56px - .6rem);border-radius:999px;background:var(--surface)}
[aria-current=page]{color:var(--text)!important;font-weight:700}
[aria-current=page] .icon{stroke-width:2.6}

@media (min-width:62rem){
  .shell{grid-template-columns:var(--side-w) minmax(0,37.5rem) var(--aside-w);gap:0 var(--col-gap);padding:0 var(--shell-pad)}
  header.top{grid-column:1/-1}
  .side-nav{display:flex;flex-direction:column;position:sticky;top:4rem;align-self:start;height:calc(100dvh - 4rem);padding:1rem 0}
  .side-nav ul{flex-direction:column;gap:.25rem}
  .side-nav a,.side-nav .link-btn{display:flex;align-items:center;gap:.85rem;min-height:48px;padding:0 .9rem;border-radius:999px;color:var(--text);text-decoration:none;font-size:1.1em}
  .side-nav .icon{width:1.5rem;height:1.5rem}
  .side-nav a:hover,.side-nav .link-btn:hover{background:var(--surface)}
  .side-nav a[aria-current=page]{background:var(--surface)}
  /* "Postar" closes the menu as a big pill, like X: filled with the text's colour, bold,
     the menu's width (an action, not a place: never marked like the current page) */
  .side-nav .postar-pill{justify-content:center;margin-top:1rem;min-height:52px;background:var(--text);color:var(--bg);font-weight:700}
  .side-nav .postar-pill:hover{background:var(--text);opacity:.9}
  /* the account at the foot: avatar, name, @ and "…"; its balloon opens above it */
  .side-nav .account-menu{display:block;position:relative;margin-top:auto}
  .side-nav:has(.menu-sheet[open]){z-index:70}
  .account-btn{display:flex;align-items:center;gap:.6rem;min-height:56px;padding:.5rem .75rem;border-radius:999px;cursor:pointer}
  .account-btn:hover,.account-menu[open]>.account-btn{background:var(--surface)}
  .account-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
  .account-names{display:grid;min-width:0;flex:1;line-height:1.25}
  .account-names>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .side-nav .account-menu[open]>summary::before{background:none}
  .account-menu .sheet.account-balloon{position:absolute;top:auto;bottom:calc(100% + .7rem);left:0;right:auto;width:max-content;min-width:100%;max-width:20rem;margin:0;padding:.35rem;border:1px solid var(--border);border-radius:1rem;box-shadow:0 8px 24px rgba(0,0,0,.3);gap:.25rem}
  .account-balloon::before{content:none!important}
  /* the little arrow, pointing down at the account */
  .account-balloon::after{content:"";position:absolute;left:1.6rem;bottom:-.45rem;width:.8rem;height:.8rem;background:var(--bg);border-right:1px solid var(--border);border-bottom:1px solid var(--border);transform:rotate(45deg)}
  .account-balloon .sheet-item{min-height:2.75rem;justify-content:flex-start;gap:.6rem;padding:0 .9rem;border-radius:.6rem;background:none}
  .account-balloon .sheet-item:hover{background:var(--surface)}
  .side-col{display:block;position:sticky;top:4rem;align-self:start;padding-top:1rem}
  .foot-mobile{display:none}
  main{border-left:1px solid var(--border);border-right:1px solid var(--border);padding-bottom:3rem}
  .bottom-nav,.ad-mobile{display:none}
  html{scroll-padding-bottom:1rem}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:0 1.1rem;border-radius:999px;border:1px solid var(--border-strong);background:transparent;color:var(--text);font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.ghost{border-color:transparent;color:var(--accent)}
.btn.wide{width:100%}
.btn:disabled{opacity:.6;cursor:not-allowed}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;border:0;background:transparent;color:var(--text);cursor:pointer}
.icon-btn:hover{background:var(--surface)}
.link-btn{border:0;background:none;font:inherit;cursor:pointer;color:var(--text);padding:0}
.icon{width:1.25rem;height:1.25rem;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* what shows on a dark screen / on a light one: dark unless picked or the system says light */
.when-light{display:none}
:root[data-theme=light] .when-light{display:inline-flex}
:root[data-theme=light] .when-dark{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .when-light{display:inline-flex}:root:not([data-theme=dark]) .when-dark{display:none}}

/* ---------- composer ---------- */
.composer,.login-cta,.notice{padding:1rem;border-bottom:1px solid var(--border)}
.login-cta p{margin:0 0 .75rem}
/* the Timeline's top: one line that looks like a field and opens the new-post box */
.np-entry{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;border-bottom:1px solid var(--border);color:var(--text-muted);text-decoration:none;cursor:text;-webkit-tap-highlight-color:transparent}
.np-entry-hint{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:1.02em;transition:color .15s}
.np-entry:hover .np-entry-hint{color:var(--text)}
.np-entry.locked .np-entry-hint{white-space:normal}
/* "postar", dimmed: nothing to post yet (the box it opens has the real one); muted, not
   faded (still readable) */
.np-entry-send{flex:none;display:inline-flex;align-items:center;min-height:2.25rem;padding:0 1rem;border:1px solid var(--border);border-radius:999px;color:var(--text-muted);font-weight:600;cursor:pointer}
.compose-input{display:block;width:100%;min-height:2.75rem;resize:none;border:0;border-radius:0;padding:.15rem 0 .4rem;background:transparent;color:var(--text);font:inherit;font-size:1.02em;field-sizing:content;max-height:60vh}
.compose-input:focus{outline:none}
.compose-input::placeholder{color:var(--text-muted)}
.composer-name{display:block;font-weight:700}
.composer-locked p{margin:.15rem 0 0;color:var(--text-muted)}
/* thread parts: a line on the left joins them to the first; × removes one */
.part-row{position:relative;margin-top:.6rem;padding-left:.85rem;border-left:2px solid var(--border-strong)}
.part-row .compose-input{padding-right:2.75rem}
.part-remove{position:absolute;top:-.35rem;right:-.35rem;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--text-muted);font-size:1.4rem;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.part-remove:hover,.part-remove:active{background:var(--surface);color:var(--text)}
/* one rounded card: text on top, a row of actions below (no inner boxes) */
.composer-box{margin-top:.35rem;background:var(--surface);border:1px solid var(--border);border-radius:1.4rem;padding:.7rem .9rem .55rem;transition:border-color .15s}
.composer-box:focus-within{border-color:var(--border-strong)}
.composer-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.35rem}
.composer-foot .photo-pick,.composer-foot .sens-pick,.composer-foot .add-part{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--bg);border:1px solid var(--border);color:var(--text-muted)}
.composer-foot .vis-pick{flex:0 1 auto;min-width:5.5rem;min-height:2.6rem;max-width:9.5rem;text-overflow:ellipsis;border-radius:999px;padding:0 .7rem;background:var(--bg);border:1px solid var(--border);color:var(--text-muted);font:inherit;font-size:.85em}
.composer-foot .add-part{width:auto;padding:0 .85rem;border-radius:999px;font-size:.85em;min-height:2.6rem}
/* a phone: "+ continuar fio" goes to a line of its own (the buttons and "Postar" stay whole) */
@media (max-width:36rem){.composer-foot{flex-wrap:wrap}.composer-foot .add-part{order:9}}
.composer-foot .send{margin-left:auto;border-radius:999px;min-height:2.6rem;padding:0 1.15rem;position:relative;overflow:hidden;isolation:isolate}
/* sending: a thin line under the word fills with the upload; done: a drawn check */
.send.sending,.send.sent{cursor:progress}
.send.sending::before,.send.sending::after,.send.sent::after{content:"";position:absolute;left:1rem;right:1rem;bottom:.3rem;height:2px;border-radius:2px;background:currentColor}
.send.sending::before{opacity:.22}
.send.sending::after,.send.sent::after{opacity:.75;transform-origin:left;transform:scaleX(var(--p,0));transition:transform .25s ease-out,opacity .2s}
.send.sent::after{opacity:0}
@media (forced-colors:active){.send.sending::before,.send.sending::after{background:ButtonText}}
.send .send-label{font-variant-numeric:tabular-nums}
.send .send-check{display:block;width:1.5em;height:1.5em;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.counter{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:.8em;white-space:nowrap}
.counter.quiet{display:none}
.counter.over{color:var(--danger);font-weight:700}

/* ---------- live bar ---------- */
/* new posts: a pill floating centered just under the header, following the scroll */
.live-bar{position:sticky;top:calc(var(--header-h,4rem) + var(--banner-h,0px) - 1px);z-index:15;height:0;display:flex;justify-content:center;overflow:visible;pointer-events:none}
.new-posts{pointer-events:auto;transform:translateY(.6rem);border:0;border-radius:999px;background:var(--accent);color:var(--on-accent);font:inherit;font-weight:600;min-height:44px;padding:0 1.1rem;cursor:pointer;box-shadow:0 6px 18px rgb(0 0 0/.25);-webkit-tap-highlight-color:transparent}
.new-posts:active{transform:translateY(.6rem) scale(.96)}
.new-posts.busy{display:inline-flex;align-items:center;gap:.5rem}
@media (prefers-reduced-motion:no-preference){.new-posts:not([hidden]){animation:pill-in .45s cubic-bezier(.34,1.4,.64,1)}}
@keyframes pill-in{0%{opacity:0;transform:translateY(-1.2rem) scale(.9)}60%{opacity:1;transform:translateY(.85rem) scale(1.03)}100%{opacity:1;transform:translateY(.6rem)}}
/* new posts at the top of the list: a quiet full-width bar, a link-like text */
.news-band{border-bottom:1px solid var(--border)}
.news-band-btn{display:block;width:100%;min-height:3rem;padding:.75rem 1rem;border:0;background:transparent;color:var(--accent);font:inherit;font-weight:600;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.news-band-btn:hover{background:var(--surface)}
.news-band-btn.busy{display:flex;align-items:center;justify-content:center;gap:.5rem}
@media (prefers-reduced-motion:no-preference){.news-band:not([hidden]){animation:band-in .25s ease-out}}
@keyframes band-in{from{opacity:0}to{opacity:1}}

/* ---------- post (Threads-like: avatar column + content) ---------- */
.post{padding:.9rem 1rem .2rem;border-bottom:1px solid var(--border);overflow-wrap:anywhere}
.post-grid{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:.75rem}
.post-avatar{align-self:start;text-decoration:none}
/* the newest answer under a post in lists: small, indented, hanging from the post's line
   (the same curve as answers to an answer) */
.has-preview .post-avatar{align-self:stretch;display:flex;flex-direction:column;align-items:center;pointer-events:none}
/* only the picture is the profile link; the line under it is the post, like the rest */
.has-preview .post-avatar>*{pointer-events:auto}
.has-preview .post-avatar::after{content:"";flex:1;width:2px;margin-top:.35rem;background:var(--border-strong)}
.reply-preview{grid-column:2;position:relative;margin:-.5rem 0 .45rem;font-size:.88em}
.reply-preview::before{content:"";position:absolute;left:calc(-2rem - 1px);top:-.25rem;height:calc(.25rem + .35rem + .625rem);width:2.1rem;border-left:2px solid var(--border-strong);border-bottom:2px solid var(--border-strong);border-bottom-left-radius:.8rem}
.rp{display:block;padding:.35rem .5rem;border-radius:.6rem;color:var(--text);text-decoration:none}
.rp:hover{background:var(--surface)}
.rp:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.rp-head{display:flex;align-items:center;gap:.4rem;min-width:0;color:var(--text-muted)}
.rp-name{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-when{flex:none}
.rp-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin-top:.15rem;white-space:pre-line}
.rp-more{display:inline-flex;align-items:center;min-height:44px;margin-top:-.3rem;padding:0 .5rem;color:var(--text-muted);font-weight:600;text-decoration:none}
.rp-more:hover{color:var(--text)}
.marker,.context{margin:0 0 .3rem;font-size:.85em;color:var(--text-muted)}
.marker{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:.75rem;align-items:center}
.marker .icon{width:.95rem;height:.95rem;justify-self:center}
.marker a,.context a{color:var(--text-muted);text-decoration:none}
.context a{display:inline-flex;align-items:center;min-height:24px}
.marker.trend-mark a{color:var(--accent);font-weight:600}
/* "Em alta: #assunto": one line over the post, the icon on the avatar's centre, the words
   from the name's column (a long topic is cut with "…"), little space down to the name */
.marker.trend-mark{margin-bottom:.15rem}
.trend-mark>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:4px;margin-block:-4px} /* (room for the focus ring) */
.marker a:hover,.context a:hover{text-decoration:underline}
.post-head{display:flex;align-items:baseline;gap:.4rem;min-width:0;font-size:.95em}
.author{color:var(--text);text-decoration:none;display:inline-flex;align-items:baseline;gap:.35rem;min-width:0;flex:0 1 auto;overflow:hidden;min-height:24px}
.author .name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%}
.author .handle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 0}
.handle,.time{color:var(--text-muted)}
.time{text-decoration:none;white-space:nowrap;flex:none}
.time:hover,.author:hover .name{text-decoration:underline}
.body{white-space:pre-wrap;margin:.1rem 0 .25rem;font-size:1em;line-height:1.45}
/* links inside text are underlined, not only colored (WCAG 1.4.1); thin line keeps it subtle */
.body a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.body a:hover{text-decoration-thickness:2px}
/* "Ler mais" at the end of a cut post: in the accent, no underline; a taller tap area
   without moving the lines around it */
.body a.read-more{font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap;padding:.6rem 0;margin:-.6rem 0}
.body a.read-more:hover{text-decoration:underline}
.body a.read-more[aria-busy=true]{color:var(--text-muted);cursor:progress}
.act.copy[aria-busy=true]{opacity:.5;cursor:progress}
.media{margin:.5rem 0 .35rem}
.media.one .media-item{display:block;width:fit-content;max-width:100%}
.media.one img{display:block;max-width:100%;height:auto;border-radius:.9rem;border:1px solid var(--border);background:var(--surface)}
.media.many{display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin-right:-1rem;padding-right:1rem}
.media.many::-webkit-scrollbar{display:none}
.media.many .media-item{flex:none;scroll-snap-align:start}
.media.many img{display:block;height:16rem;width:auto;max-width:80vw;object-fit:cover;border-radius:.9rem;border:1px solid var(--border);background:var(--surface)}
/* photo viewer (app.js): always dark, the photo as large as the screen allows */
html.viewer-open{overflow:hidden}
.viewer{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgb(0 0 0/.94);color:#fff;overscroll-behavior:contain}
.viewer::backdrop{background:rgb(0 0 0/.94)}
.viewer-fig{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3.5rem .5rem 1.5rem;box-sizing:border-box}
.viewer-fig img{max-width:100%;max-height:calc(100dvh - 8rem);object-fit:contain;border-radius:.4rem;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.viewer-fig figcaption{max-width:40rem;padding:0 1rem;text-align:center;font-size:.9em;color:rgb(255 255 255/.85)}
.viewer-fig figcaption:empty{display:none}
.viewer-btn{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:0;border-radius:50%;background:rgb(255 255 255/.14);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.viewer-btn:hover{background:rgb(255 255 255/.24)}
.viewer-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.viewer-btn[hidden]{display:none}
.viewer-close{top:calc(.6rem + env(safe-area-inset-top));right:.75rem}
.viewer-prev{left:.5rem;top:50%;transform:translateY(-50%)}
.viewer-next{right:.5rem;top:50%;transform:translateY(-50%)}
.viewer-count{position:absolute;top:calc(.6rem + env(safe-area-inset-top));left:0;right:0;margin:0;line-height:48px;text-align:center;font-size:.95em;pointer-events:none}
.media.video .video-box{position:relative;width:fit-content;max-width:100%}
.media.video video{display:block;max-width:100%;height:auto;border-radius:.9rem;border:1px solid var(--border);background:#000}
.video-time{position:absolute;left:.5rem;top:.5rem;padding:.1rem .5rem;border-radius:999px;background:rgba(0,0,0,.7);color:#fff;font-size:.78em;font-weight:600;font-variant-numeric:tabular-nums;pointer-events:none;transition:opacity .2s ease}
.video-box.started .video-time{opacity:0}
/* a GIF: a small "GIF" mark that stays; a tap stops or starts it */
.gif-mark{position:absolute;left:.5rem;bottom:.5rem;padding:.05rem .4rem;border-radius:.35rem;background:rgba(0,0,0,.7);color:#fff;font-size:.72em;font-weight:700;letter-spacing:.04em;pointer-events:none}
.gif-box video{cursor:pointer}
.gif-glyph{font-weight:800;font-size:.72rem;letter-spacing:.03em}
.quoted-video .gif-mark{bottom:.35rem;left:.35rem}
.video-thumb .gif-mark{top:.5rem;bottom:auto}
/* a sticker: small, no frame, nothing behind it (it is see-through) */
.media.one.sticker img.sticker-img{width:auto;max-width:min(10rem,60%);max-height:10rem;border:0;border-radius:0;background:none}
.quoted .quoted-sticker{width:auto;max-height:6rem;border:0;border-radius:0;background:none;object-fit:contain}
.gif-thumb canvas{display:block;width:100%;height:12rem;object-fit:cover;border-radius:.9rem;border:1px solid var(--border)}
.sticker-thumb img{object-fit:contain;border:0;background:none}
/* "Minhas figurinhas e GIFs": a grid to pick from in the box, tiles on their page */
/* just opened: a second tap of a double tap lands on nothing in it */
.lib-dialog.settling .sheet{pointer-events:none}
.lib-dialog .lib-body{min-height:6rem;max-height:min(55dvh,26rem);overflow-y:auto;overscroll-behavior:contain}
.lib-loading,.lib-body .empty{margin:1.5rem 0;text-align:center;color:var(--text-muted)}
.lib-reload{display:block;margin:0 auto 1rem}
.lib-grid,.lib-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr));gap:.5rem}
.lib-item{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:.75rem;background:var(--surface);overflow:hidden}
.lib-item img,.lib-pic img{width:100%;height:100%;object-fit:contain}
.lib-item.gif img,.lib-item[data-kind=gif] img,.lib-tile.gif .lib-pic img{object-fit:cover}
.lib-item:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* GIPHY's search: the field, GIFs | Stickers, and its "Powered by GIPHY" */
.giphy-q{display:block;width:100%;min-height:2.75rem;margin:0 0 .5rem;padding:.5rem .75rem;border:1px solid var(--border);border-radius:.75rem;background:var(--surface);color:var(--text);font:inherit}
.giphy-q:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.giphy-tabs{display:flex;gap:.5rem;margin:0 0 .5rem}
.giphy-tab{flex:1;min-height:2.75rem;border:1px solid var(--border);border-radius:999px;background:none;color:var(--text);font:inherit;font-weight:600;cursor:pointer}
.giphy-tab[aria-pressed=true]{background:var(--text);color:var(--bg);border-color:var(--text)}
.giphy-tab:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.giphy-grid .lib-item img{object-fit:cover}
.giphy-error{color:var(--danger);font-weight:600}
.giphy-retry{display:block;min-height:44px;margin:0 auto 1rem}
.giphy-powered{margin:.5rem 0 0;text-align:center;font-size:.8em;font-weight:700;letter-spacing:.02em;color:var(--text-muted)}
/* "via GIPHY" under one in a post (its source, as GIPHY asks) */
.giphy-credit{display:inline-block;margin:.25rem 0 0;font-size:.78em;color:var(--text-muted);text-decoration:none}
.giphy-credit:hover,.giphy-credit:focus-visible{text-decoration:underline}
.library-page{padding:0 1rem 1rem}
.lib-section h2{font-size:1.05em;margin:1.25rem 0 .6rem}
.lib-tiles{grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.75rem}
.lib-tile{display:grid;gap:.4rem;align-content:start}
.lib-pic{position:relative;display:block;aspect-ratio:1;border-radius:.75rem;background:var(--surface);overflow:hidden}
.lib-actions{display:flex;flex-wrap:wrap;gap:.25rem}
.lib-actions form{display:contents}
.lib-actions .btn{flex:1}
.quoted-video{position:relative;display:block;width:fit-content;max-width:100%}
.play-mark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.play-mark .icon,.play-mark svg{width:2.6rem;height:2.6rem;padding:.7rem;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;fill:#fff;stroke:#fff;stroke-width:1.5}
.quoted-video .play-mark{top:.5rem}
.yt-card{max-width:30rem;border:1px solid var(--border);border-radius:.9rem;overflow:hidden;background:var(--surface)}
.yt-open{display:block;color:inherit;text-decoration:none}
.yt-open:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.yt-thumb{position:relative;display:block;aspect-ratio:16/9;background:#000}
.yt-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.yt-meta{display:grid;gap:.1rem;padding:.55rem .8rem .65rem}
.yt-title{font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.yt-site{color:var(--text-muted);font-size:.85em}
.link-card .yt-site{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yt-frame{aspect-ratio:16/9;background:#000}
.yt-frame iframe{display:block;width:100%;height:100%;border:0}
.link-preview{margin:.4rem 0}
.link-preview .yt-card{max-width:22rem}
.link-preview .yt-note{margin:0;color:var(--text-muted);font-size:.85em}
.link-preview[aria-busy=true] .yt-note{animation:breathe 1.4s ease-in-out infinite}
.media-item:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:.9rem}
/* a quoted post: a light card, smaller than the post around it (not a framed notice) */
.quoted{display:block;margin:.55rem 0 .2rem;padding:.65rem .85rem;border:1px solid var(--border);border-radius:1rem;color:var(--text);text-decoration:none;font-size:.94em;transition:background-color .15s}
.quoted:hover{background:var(--surface)}
.quoted-head{display:flex;align-items:center;gap:.4rem;min-width:0;white-space:nowrap;margin-bottom:.2rem}
.quoted-head .name{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.quoted-head .handle,.quoted-head .when{color:var(--text-muted);overflow:hidden;text-overflow:ellipsis}
.quoted-head .when{flex:none}
.quoted-head .when::before{content:"· "}
.quoted-body{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;white-space:pre-wrap;line-height:1.4}
.quoted-photo{display:block;margin-top:.5rem;max-width:100%;height:auto;object-fit:cover;border-radius:.7rem}
.avatar.xs{width:1.25rem;height:1.25rem;font-size:.55rem;letter-spacing:0}
.thread-link{display:inline-block;font-size:.9em;margin:.1rem 0 .25rem;min-height:24px}
.actions{display:flex;align-items:center;gap:.15rem;margin-left:-.5rem;overflow-x:auto;scrollbar-width:none}
.actions::-webkit-scrollbar{display:none}
.actions .act{flex:none;padding:0 .5rem;min-width:42px}
.act-form{margin:0}
.act{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;min-height:44px;min-width:44px;padding:0 .55rem;border:0;border-radius:999px;background:transparent;color:var(--text);font:inherit;font-size:.9em;cursor:pointer;text-decoration:none}
.act .icon{width:1.3rem;height:1.3rem}
/* (only where there is a mouse: after a tap the iPhone keeps :hover on, a circle left behind) */
@media (hover:hover){.act:hover{background:var(--surface)}}
.act .count{font-variant-numeric:tabular-nums;color:var(--text-muted);min-width:1ch}
.act.like .icon{fill:none}
.act.like[aria-pressed=true]{color:var(--like)}
.act.like[aria-pressed=true] .count{color:var(--like)}
.act.like[aria-pressed=true] .icon{fill:currentColor}
.act.repost[aria-pressed=true],.act.repost[aria-pressed=true] .count{color:var(--accent)}

/* ---------- avatars (initials until photo upload) ---------- */
.avatar{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;font-weight:700;font-size:.95em;letter-spacing:.02em;user-select:none;flex:none}
.avatar.lg{width:4.5rem;height:4.5rem;font-size:1.6em}
img.avatar{object-fit:cover;background:var(--surface)}
.photo-row{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.photo-row .photo-form{flex:1 1 14rem;margin:0}
.photo-row input[type=file]{max-width:100%;border:0;padding:0;background:none;min-height:0;font-size:.9em!important;color:var(--text-muted)}
input[type=file]::file-selector-button{font:inherit;font-weight:600;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:999px;padding:.5rem 1rem;margin-right:.75rem;cursor:pointer}
input[type=file]:focus-visible::file-selector-button{outline:3px solid var(--focus);outline-offset:2px}
/* .av-0 … .av-7 colours come from theme.rs (AVATAR_COLOURS, contrast-tested) */

.feed{display:block}
.feed-gap{display:block}
.load-more{display:flex;justify-content:center;align-items:center;min-height:52px;font-weight:600}
.empty,.end{padding:2rem 1rem;text-align:center;color:var(--text-muted)}
/* post page: the post itself reads a bit larger; answers come under a heading */
.thread-item.focus .post:not(.part-replies *) .body{font-size:1.08em}
/* an author's thread: one line runs from avatar to avatar, no dividers between parts */
.thread-item{position:relative}
.thread.chain .thread-item:not(:last-child) .post:not(.part-replies *){border-bottom:0;padding-bottom:0}
.thread.chain .thread-item:not(:last-child)::before{content:"";position:absolute;left:calc(2rem - 1px);top:calc(.9rem + 2rem + .35rem);bottom:-.55rem;width:2px;border-radius:2px;background:var(--border-strong)}
/* post page: smaller avatars and text than the feed, so the conversation fits */
.thread .post-grid,.replies .post-grid,.thread .marker,.replies .marker{grid-template-columns:2rem minmax(0,1fr);gap:.65rem}
.thread .avatar.sm,.replies .avatar.sm{width:2rem;height:2rem;font-size:.72em}
.replies .post .body{font-size:.95em}
.replies .post-head{font-size:.95em}
/* answers to an answer hang under it, joined by a curved line */
.reply-group{border-bottom:1px solid var(--border)}
.reply-group .post{border-bottom:0}
.reply-item{position:relative}
.reply-item.nested .post{padding-left:3.65rem;padding-top:.45rem}
.reply-group.has-nested .reply-item.top::before{content:"";position:absolute;left:calc(2rem - 1px);top:calc(.9rem + 2rem + .35rem);bottom:0;width:2px;background:var(--border-strong)}
.reply-item.nested::before{content:"";position:absolute;left:calc(2rem - 1px);top:0;height:calc(.45rem + 1rem);width:1.25rem;border-left:2px solid var(--border-strong);border-bottom:2px solid var(--border-strong);border-bottom-left-radius:.9rem}
.reply-item.nested:not(:last-child)::after{content:"";position:absolute;left:calc(2rem - 1px);top:0;bottom:0;width:2px;background:var(--border-strong)}
/* collapsed answers: one row with small faces; open, the answers follow the line */
.nested-replies{position:relative}
.more-replies{position:relative;display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.2rem 1rem .5rem 3.65rem;list-style:none;cursor:pointer;color:var(--text-muted);font-size:.9em;font-weight:600;-webkit-tap-highlight-color:transparent}
.more-replies::-webkit-details-marker{display:none}
.more-replies::before{content:"";position:absolute;left:calc(2rem - 1px);top:0;height:1.35rem;width:1.25rem;border-left:2px solid var(--border-strong);border-bottom:2px solid var(--border-strong);border-bottom-left-radius:.9rem}
.nested-replies[open]>.more-replies::after{content:"";position:absolute;left:calc(2rem - 1px);top:0;bottom:0;width:2px;background:var(--border-strong)}
.more-replies:hover{color:var(--text)}
.more-replies:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:.5rem}
.faces{display:inline-flex}
.faces .avatar{box-shadow:0 0 0 2px var(--bg)}
.faces .avatar+.avatar{margin-left:-.35rem}
.nested-replies>summary .when-open,.nested-replies[open]>summary .when-closed{display:none}
.nested-replies[open]>summary .when-open{display:inline}
.nested-replies[open]>.more-replies .faces{display:none}
/* on the post page every answer's parent is on screen already */
.replies .context{display:none}
.answers-to{margin:0;padding:.5rem 1rem 0 3.75rem;color:var(--text-muted);font-size:.85em}
.thread.chain .part{position:absolute;right:1rem;top:.95rem;font-size:.8em;color:var(--text-muted);font-variant-numeric:tabular-nums}
.thread.chain .thread-item .post-head:not(.part-replies *){padding-right:2.5rem}
.thread.chain .thread-item.focus .post:not(.part-replies *) .body{font-size:1em}
/* parts 2…N of an author's thread sit inside the first: indented to its text, hanging
   from its line with the same curve as answers to an answer */
.own-thread .thread-item.cont .post:not(.part-replies *){padding-left:3.65rem;padding-top:.45rem}
.thread.chain.own-thread .thread-item.cont::before{content:"";position:absolute;left:calc(2rem - 1px);top:0;bottom:auto;height:calc(.45rem + 1rem);width:1.25rem;background:none;border-radius:0 0 0 .9rem;border-left:2px solid var(--border-strong);border-bottom:2px solid var(--border-strong)}
.thread.chain.own-thread .thread-item.cont:not(:last-child)::after{content:"";position:absolute;left:calc(2rem - 1px);top:0;bottom:0;width:2px;background:var(--border-strong)}
.thread.chain.own-thread .thread-item:first-child::before{bottom:0;border-radius:0}
.own-thread .thread-item.cont .part{top:.5rem}
/* answers to a part of the author's thread hang under that part, like answers to an
   answer: a line from its avatar, collapsed by default, indented to its text */
.part-head{position:relative}
.part-head.has-replies::before{content:"";position:absolute;left:calc(2rem - 1px);top:calc(.9rem + 2rem + .35rem);bottom:0;width:2px;background:var(--border-strong)}
.own-thread .thread-item.cont .part-head.has-replies::before{left:calc(4.65rem - 1px);top:calc(.45rem + 2rem + .35rem)}
.own-thread .thread-item.cont .part-replies{margin-left:2.65rem}
.part-replies-list{margin-left:2.65rem}
.part-replies .reply-group:last-of-type{border-bottom:0}
/* open: each answer hangs from the part's line with the same curve as answers to an answer */
.part-replies-list>.reply-group{position:relative}
.part-replies-list>.reply-group::before{content:"";position:absolute;left:calc(-.65rem - 1px);top:0;height:calc(.9rem + 1rem);width:1.25rem;border-left:2px solid var(--border-strong);border-bottom:2px solid var(--border-strong);border-bottom-left-radius:.9rem}
.part-replies-list>.reply-group:not(:last-of-type)::after{content:"";position:absolute;left:calc(-.65rem - 1px);top:0;bottom:0;width:2px;background:var(--border-strong)}
/* the part already says whom they answer; indented twice, the actions keep to the width */
.part-replies .context{display:none}
.part-replies .post{padding-right:.5rem}
.part-replies .actions{gap:0}
.part-replies .actions .act{padding:0 .3rem;min-width:36px}
.all-replies{display:flex;align-items:center;min-height:44px;padding:0 1rem;font-size:.9em;font-weight:600}
/* the part 1 already says what is trending; a marker above a part would bend the curve */
.own-thread .thread-item.cont .marker.trend-mark:not(.part-replies *){display:none}
.own-thread .thread-item.cont .media.many img:not(.part-replies *){max-width:calc(100vw - 6rem)}
.own-thread .part-replies .media.many img{max-width:calc(100vw - 9rem)}
/* just answered: the page lands on it and it glows for a moment */
.post:target{scroll-margin-top:7.5rem}
@media (prefers-reduced-motion:no-preference){.post:target{animation:just-posted 2.4s ease-out}}
@keyframes just-posted{from{background:color-mix(in srgb,var(--accent) 14%,transparent)}to{background:transparent}}
.replies{border-top:1px solid var(--border)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem .25rem}
.section-head h2{font-size:1em;margin:0}
.search-section>.section-head{padding-inline:1rem}
.sort{display:flex;gap:.25rem;background:var(--surface);border-radius:999px;padding:.2rem}
.sort a,.sort button{display:inline-flex;align-items:center;min-height:36px;padding:0 .85rem;border:0;border-radius:999px;background:none;color:var(--text-muted);text-decoration:none;font:inherit;font-size:.9em;font-weight:600;cursor:pointer}
.sort a[aria-current],.sort button[aria-pressed=true]{background:var(--bg);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.sort a:not([aria-current]):hover,.sort button[aria-pressed=false]:hover{color:var(--text)}
.sort.inline{display:inline-flex}
.composer-context{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem;margin:.1rem 0 .4rem;color:var(--text-muted);font-size:.9em}
.composer-context .icon{width:1rem;height:1rem}
/* stuck bars tuck 1px under the one above: rounded heights never leave a seam that
   lets the page show through while scrolling (seen on iPhone) */
.page-bar{position:sticky;top:calc(var(--header-h,4rem) + var(--banner-h,0px) - 1px);z-index:9;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:.5rem;padding:.25rem .75rem;background:var(--bg);border-bottom:1px solid var(--border)}
.page-bar h1{font-size:1.05em;margin:0;text-align:center}
.page-bar .page-title{min-width:0;text-align:center}
.page-bar .page-title h1{line-height:1.25}
.activity-post{padding:.5rem 1rem 0;margin-bottom:.5rem}
/* "Curtidas 12 ›" / "Reposts 3 ›": each opens its own list */
.activity-totals{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.activity-totals a{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:48px;padding:0 1rem;border-bottom:1px solid var(--border);color:var(--text);text-decoration:none;font-weight:600}
.activity-totals a:hover{background:var(--surface)}
.activity-totals .total-end{display:inline-flex;align-items:center;gap:.35rem;color:var(--text-muted);font-weight:400}
.activity-totals .total-end>span{display:inline-flex}
.activity-totals .icon{display:block;width:1rem;height:1rem}
.activity-link{display:inline-flex;align-items:center;min-height:44px;margin-left:auto;color:var(--text-muted);font-size:.9em;font-weight:600;text-decoration:none;white-space:nowrap}
.activity-link:hover{color:var(--text)}
.section-head:has(.activity-link){flex-wrap:wrap}
.activity-list .name-line{display:flex;align-items:baseline;gap:.4rem;min-width:0}
.activity-list .name-line .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.activity-list .when{flex:none;color:var(--text-muted);font-size:.85em}
.activity-followers{display:inline-flex;align-items:center;gap:.4rem;margin-top:.2rem;color:var(--text-muted);font-size:.85em}
.activity-row .news-who{flex:none}
/* post page: "reply to …" always within reach, above the bottom menu */
.reply-bar{position:fixed;z-index:24;left:50%;transform:translateX(-50%);bottom:calc(5.6rem + env(safe-area-inset-bottom));width:min(36rem,calc(100% - 1.5rem));box-sizing:border-box;display:flex;align-items:center;gap:.6rem;min-height:48px;padding:.4rem 1rem;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text-muted);text-decoration:none;box-shadow:0 6px 20px rgb(0 0 0/.25);-webkit-tap-highlight-color:transparent}
.reply-bar[hidden]{display:none}
.reply-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reply-bar:active{transform:translateX(-50%) scale(.98)}
/* wide: over the middle column, with 1rem each side (100% here is the screen without its
   scroll bar; the middle column is what the shell leaves after the side ones) */
@media (min-width:62rem){.reply-bar{
  --shell-w:min(100%,var(--shell-max));
  --mid-w:calc(var(--shell-w) - 2*var(--shell-pad) - var(--side-w) - var(--aside-w) - 2*var(--col-gap));
  bottom:1.25rem;transform:none;
  left:calc((100% - var(--shell-w))/2 + var(--shell-pad) + var(--side-w) + var(--col-gap) + 1rem);
  width:calc(var(--mid-w) - 2rem)}
  .reply-bar:active{transform:scale(.98)}}
/* the reply box: in the page without JavaScript; with it, a full-screen panel opened by the bar */
.reply-panel-head{display:none}
/* hidden only when the bar can open it (logged out or unverified: the explanation stays in the page) */
.js body:has(.reply-bar) .reply-panel:not(.open){display:none}
.js .reply-panel.open{position:fixed;inset:0;z-index:70;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);padding-top:env(safe-area-inset-top)}
.js .reply-panel.open .reply-panel-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:3.25rem;padding:0 1rem;border-bottom:1px solid var(--border)}
.reply-panel-head h2{margin:0;font-size:1.05em}
.reply-panel-post{display:none}
.js .reply-panel.open .reply-panel-post{display:block;padding:.75rem 1rem 0;pointer-events:none}
.reply-panel-head .close-panel{justify-self:start;min-height:44px;display:inline-flex;align-items:center;font-weight:600;text-decoration:none;color:var(--text)}
.js .reply-panel.open .composer{border-bottom:0}
html.panel-open{overflow:hidden}
.np-loading{margin:0;padding:2.5rem 1rem;text-align:center;color:var(--text-muted)}
.np-catch{position:absolute;width:1px;height:1px;opacity:0;border:0;padding:0}
.np-panel .composer{border-bottom:0}
/* drafts (in the account): the list button at the right of the head, a way back at the left */
.np-panel .reply-panel-head h2{grid-column:2}
.np-panel .reply-panel-head h2:focus{outline:none}
.np-back{grid-column:1;justify-self:start;margin-left:-.6rem}
.np-drafts{grid-column:3;justify-self:end;margin-right:-.6rem}
.np-panel.saving .np-body{opacity:.6;cursor:progress}
.drafts-view{min-height:8rem}
.drafts-view[aria-busy=true]{opacity:.6}
.drafts-empty{margin:0;padding:2.5rem 1rem;text-align:center}
.drafts-list{list-style:none;margin:0;padding:0}
.draft-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;border-bottom:1px solid var(--border)}
.draft-open{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:start;width:100%;padding:.85rem 0 .85rem 1rem;border:0;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.draft-open:hover{background:var(--surface)}
.draft-open:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.draft-main{display:grid;gap:.15rem;min-width:0}
.draft-who{color:var(--text-muted);font-size:.9em}
.draft-text{overflow-wrap:anywhere;white-space:pre-line;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.draft-meta{color:var(--text-muted);font-size:.9em}
.draft-menu{padding:.5rem .5rem 0 0}
.draft-item[aria-busy=true]{opacity:.55;pointer-events:none}
.draft-pending{color:var(--text-muted);font-size:.85em}
.draft-pending::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.4em;border-radius:50%;background:var(--accent,currentColor);vertical-align:.1em}
.drafts-loading{margin:0;padding:2.5rem 1rem;text-align:center}
.drafts-note{margin:0;padding:1rem;color:var(--text-muted);font-size:.85em;text-align:center}
.drafts-note.full{color:var(--text);font-weight:600}
/* "Sincronizar rascunhos com a conta": a quiet line under the list while it is off */
.drafts-sync{padding:1rem;text-align:center;font-size:.85em}
.drafts-sync p{margin:0 0 .35rem}
.drafts-sync .link-btn{color:var(--accent);min-height:44px;padding:0 .5rem;text-decoration:underline;text-underline-offset:.15em}
.drafts-sync .link-btn[aria-busy=true]{cursor:progress;opacity:.7;text-decoration:none}
/* the switch in Configurações (a button: on/off by aria-checked) */
.sync-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.75rem 0}
.switch{flex:none;position:relative;width:3.25rem;height:2rem;padding:0;border:2px solid var(--text-muted);border-radius:999px;background:var(--bg);cursor:pointer}
.switch::after{content:"";position:absolute;top:.2rem;left:.2rem;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--text-muted);transition:transform .15s}
.switch[aria-checked=true]{background:var(--accent);border-color:var(--accent)}
.switch[aria-checked=true]::after{transform:translateX(1.25rem);background:var(--on-accent)}
.switch[aria-busy=true]{cursor:progress;opacity:.6}
@media (prefers-reduced-motion:reduce){.switch::after{transition:none}}
/* "Salvar nos rascunhos?": a small box over the panel */
.draft-ask{border:0;border-radius:1.25rem;padding:1.25rem;width:min(calc(100% - 2rem),22rem);background:var(--bg);color:var(--text);box-shadow:0 20px 60px rgb(0 0 0/.45)}
.draft-ask::backdrop{background:rgba(0,0,0,.5)}
.draft-ask h2{margin:0 0 .4rem;font-size:1.1em}
.draft-ask p{margin:0 0 1rem;color:var(--text-muted)}
.draft-ask .btn{width:100%;margin-top:.5rem}
.confirm-ask p{color:var(--text);white-space:pre-line;overflow-wrap:anywhere;max-height:60vh;overflow-y:auto}
.btn.danger{color:var(--danger);border-color:var(--danger)}
@media (prefers-reduced-motion:no-preference){.draft-ask[open]{animation:sheet-pop .16s cubic-bezier(.2,.8,.3,1)}}
/* on a wide screen: a box in the middle over a dimmed page (the page behind is inert) */
@media (min-width:62rem){.js .reply-panel.open{inset:auto 0 auto 0;top:10vh;margin:0 auto;max-width:38rem;max-height:80vh;border:1px solid var(--border);border-radius:1.25rem;box-shadow:0 20px 60px rgb(0 0 0/.45),0 0 0 100vmax rgb(0 0 0/.55)}}
main:has(.reply-bar){padding-bottom:5rem}
/* phone: the bar sits above the bottom menu; the last answer can still scroll clear of both */
@media (max-width:61.99rem){main:has(.reply-bar){padding-bottom:calc(10rem + env(safe-area-inset-bottom))}html:has(.reply-bar){scroll-padding-bottom:10.5rem}}
/* messages show over the open reply box too */
html.panel-open .toasts{z-index:80}
/* a tap on a post's row opens it */
.js .feed article.post,.js .replies article.post,.js .thread article.post{cursor:pointer}
.search-section h2 .n{color:var(--text-muted);font-weight:400}

/* ---------- side ---------- */
.card{border:1px solid var(--border);border-radius:1rem;padding:.75rem 1rem;margin-bottom:1rem}
.card h2{margin:.25rem 0 .5rem}
.card h2 a{color:var(--text);text-decoration:none}
/* "O que está acontecendo": each topic a line clickable whole (the topic's link covers it),
   context above, the start of what is being said in one line, the count; "⋯" on the right */
.trends-side ol{list-style:none;margin:0 -1rem;padding:0}
.side-trend{position:relative;display:flex;flex-direction:column;gap:.1rem;padding:.55rem 1rem;min-height:44px}
.side-trend:has(>.topic-menu){padding-right:3rem}
/* (a topic coming in only fades: a moving line would hold its open sheet inside it) */
@media (prefers-reduced-motion:no-preference){.side-trend.trend-fresh{animation-name:trend-fade}}
@keyframes trend-fade{from{opacity:0}to{opacity:1}}
.side-trend:hover{background:var(--surface)}
.side-trend .topic{margin:0;color:var(--text);text-decoration:none;overflow-wrap:anywhere}
.trend-context{font-size:.8em}
.side-trend .trend-summary{-webkit-line-clamp:1;line-clamp:1;font-size:.9em}
.side-trend .trend-meta{font-size:.8em}
.topic-menu{position:absolute;top:.3rem;right:.25rem}
.topic-menu>summary{color:var(--text-muted)}
.topic-menu>summary:hover{color:var(--text)}
/* the column sits above the header while one of its sheets is open (its backdrop covers all) */
.side-col:has(.menu-sheet[open]){z-index:70}
.side-trend[aria-busy=true]{opacity:.55}
.side-trend.folding{opacity:0;transition:opacity .2s}
.side-more{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
/* a link that covers its whole line (the line's other text describes it) */
.stretch::after{content:"";position:absolute;inset:0}
.stretch:focus-visible{outline:none}
.stretch:focus-visible::after{outline:2px solid var(--focus);outline-offset:-2px}
.site-footer{font-size:.85em;color:var(--text-muted);padding:.5rem}
.site-footer a{color:var(--text-muted)}
.foot-mobile{margin:2rem 0 0;padding:1rem;border-top:1px solid var(--border);text-align:center}
.foot-mobile .lang-form{justify-content:center}
/* not under an endless list (it would run away; it shows when the list ends; Entrar and
   Configurações carry it on phones), and no second switch where the page has its own */
.js main:has(.load-more) .foot-mobile,main:has(.auth-card .lang-form,#idioma) .foot-mobile .lang-form{display:none}
.trends-list{list-style:none;padding:0;margin:0}
/* a topic that came in or went up while the list updated itself: slides in, once */
@media (prefers-reduced-motion:no-preference){.trend-fresh{animation:trend-in .5s cubic-bezier(.2,.8,.2,1)}}
@keyframes trend-in{from{opacity:0;transform:translateY(-.35rem)}to{opacity:1;transform:none}}
.trend-row{position:relative;display:flex;align-items:baseline;gap:.75rem;padding:.85rem 1rem;border-bottom:1px solid var(--border);min-height:44px}
.trend-row:hover{background:var(--surface)}
.trend-row .topic{color:var(--text);text-decoration:none;overflow-wrap:anywhere}
.rank{color:var(--text-muted);font-variant-numeric:tabular-nums;min-width:2ch}
.topic{font-weight:700;margin-right:auto}
/* a topic's line: the topic, what is being said (two lines at most), the numbers */
.trend{display:flex;flex-direction:column;gap:.15rem;flex:1;min-width:0}
.trend .topic{margin:0}
.trend-summary{line-height:1.35;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.trend-meta{font-size:.85em}
.trends-head{padding:.5rem 1rem 0}
.trends-head h1{margin:0}
.trends-head+p.muted{margin:.25rem 0 .75rem}
/* one side margin for everything that is not a full-bleed list (feeds, composer) */
main>h1,main>h2,main>p,main>form:not(.composer),main>ul,main>ol,main>.search-section>h2,
main>.search-section>ul,main>.search-section>p,main>.search-section>.search-head,main>.search-tips{padding-inline:1rem}
main>.card,main>.notice,main>section.settings{margin-inline:1rem}
.profile-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1rem .5rem}
.profile-who{min-width:0}
.profile-head h1{margin:0;overflow-wrap:anywhere}
.profile-head .handle{margin:0;overflow-wrap:anywhere}
.profile-bio{margin:.25rem 0 .5rem;white-space:pre-line;overflow-wrap:anywhere}
/* two equal outlined buttons, like the apps */
.profile-actions{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem 1rem .75rem}
.profile-actions .btn{flex:1 1 0;min-width:9rem;white-space:nowrap;border-color:var(--border-strong);color:var(--text)}
/* the five parts share the width (and scroll sideways on a very narrow screen); both
   classes, or the search tabs' own spacing (further down) wins */
.search-tabs.profile-tabs{margin:0}
.search-tabs.profile-tabs a{flex:1 0 auto;justify-content:center;padding:0 .6rem}
.search-tabs.profile-tabs a[aria-current=page]::after{left:.6rem;right:.6rem}
/* five on a phone: tighter, so all show without scrolling down to 360px */
@media (max-width:30rem){
  .search-tabs.profile-tabs{gap:0}
  .search-tabs.profile-tabs a{padding:0 .3rem;font-size:.875em}
  .search-tabs.profile-tabs a[aria-current=page]::after{left:.3rem;right:.3rem}
}

/* ---------- ads ---------- */
.ad{display:flex;flex-direction:column;gap:.15rem;border:1px solid var(--border);border-radius:1rem;padding:.6rem .9rem;margin-bottom:1rem;font-size:.9em}
.ad-label{font-size:.75em;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.ad a{color:var(--text);text-decoration:none}
.ad-mobile{position:fixed;left:0;right:0;bottom:calc(76px + env(safe-area-inset-bottom));z-index:19;background:var(--bg);border-top:1px solid var(--border);padding:.25rem .75rem}
.ad-mobile .ad{border:0;margin:0;padding:.2rem 0;max-height:56px;overflow:hidden}

/* ---------- forms ---------- */
.auth-card,.message,.legal{padding:1rem;max-width:30rem}
.legal{max-width:42rem}
.auth-card form{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.auth-card label{font-weight:600;margin-top:.5rem}
.auth-card input[type=text],.auth-card input[type=email],.auth-card input[type=password],.auth-card input[type=date]{box-sizing:border-box;height:2.9rem;min-height:44px;width:100%;border:1px solid var(--border-strong);border-radius:.6rem;padding:0 .75rem;background:var(--bg);color:var(--text);font:inherit;line-height:normal}
/* iPhone draws the date field its own way (another height, empty = collapsed, centred
   text): same box as the others, text on the left */
.auth-card input[type=date]{-webkit-appearance:none;appearance:none;display:flex;align-items:center}
.auth-card input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
.auth-card input[type=date]::-webkit-calendar-picker-indicator{opacity:.7}
.auth-card .btn.primary{margin-top:1rem}
/* "Esqueci minha senha": under the password; the answer's tips and ways on */
.auth-card .forgot{align-self:flex-end;padding:.4rem 0;font-size:.9rem}
.reset-sent h2{font-size:1.05rem;margin:1.25rem 0 .25rem}
.reset-tips{padding-left:1.25rem;margin:.25rem 0 1rem}
.reset-tips li{margin:.3rem 0}
.reset-links{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
/* "Continuar com Google": Google's light/dark button (the G unchanged, our page's colours) */
.google-btn{background:var(--bg);gap:.65rem}
.google-btn .g-logo{flex:none}
.google-btn.busy .g-logo{display:none}
.g-logo{vertical-align:-.2em}
.google-email{display:grid;grid-template-columns:auto 1fr;gap:.65rem;align-items:start;padding:.75rem;border:1px solid var(--border);border-radius:.6rem;background:var(--surface);overflow-wrap:anywhere}
.google-email .g-logo{margin-top:.15rem}
.google-note{margin:0;font-size:.85rem;color:var(--text-muted);text-align:center}
.handle-field{display:flex;align-items:center;border:1px solid var(--border-strong);border-radius:.6rem;background:var(--bg);padding-left:.75rem}
.handle-field:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.handle-at{color:var(--text-muted);font-weight:600}
.auth-card .handle-field input[type=text],.stack .handle-field input{flex:1;min-width:0;border:0;padding-left:.15rem;outline:none;background:transparent}
.handle-field:has(input[aria-invalid=true]){border-color:var(--danger)}
.handle-status[data-state=livre],.handle-status[data-state=seu]{color:var(--accent);font-weight:600}
.handle-status[data-state=ocupado],.handle-status[data-state=invalido],.handle-status[data-state=reservado]{color:var(--danger);font-weight:600}
.handle-settings{margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.handle-settings h3{margin:.25rem 0 .5rem}
.handle-settings .notice{overflow-wrap:anywhere}
.google-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.inapp-steps{padding-left:1.25rem}
.inapp-steps li{margin:.35rem 0}
.inapp-url{box-sizing:border-box;width:100%;min-height:44px;border:1px solid var(--border-strong);border-radius:.6rem;padding:0 .75rem;background:var(--surface);color:var(--text);font:inherit}
.google-settings{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border)}
.google-settings h3{display:flex;align-items:center;gap:.5rem;margin:.25rem 0 .5rem}
.google-settings form{margin:.5rem 0}
.settings-part{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border)}
.settings-part h3{margin:.25rem 0 .5rem}
.settings-part form{margin:.5rem 0}
/* "Trocar de conta": one row per account (avatar, name and @, its button); the login
   page's "Voltar para @x" uses the same rows */
.switch-list{list-style:none;margin:.75rem 0 1rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.switch-row{display:flex;align-items:center;gap:.65rem;padding:.6rem .75rem;border:1px solid var(--border);border-radius:.75rem;min-height:56px;box-sizing:border-box}
.switch-row.current{background:var(--surface)}
.switch-who{display:grid;flex:1;min-width:0;line-height:1.25}
.switch-who>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.switch-current{flex:none;font-size:.85rem;font-weight:600;color:var(--accent)}
.auth-card .switch-use{flex:none;margin:0}
.switch-use .btn{min-height:44px;max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.switch-back{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border)}
.switch-back h2{font-size:1.05rem;margin:0}
/* on the login page the button says "Voltar para @handle": its own line, the whole name shown */
.switch-back .switch-row{flex-wrap:wrap}
.auth-card .switch-back .switch-use{flex:1 1 100%}
.switch-back .switch-use .btn{width:100%;max-width:none;white-space:normal;overflow-wrap:anywhere}
/* one line, even on a small phone: compact buttons, "Sair" opens a sheet with both ways out */
.settings-shortcuts{display:flex;flex-wrap:nowrap;gap:.4rem;margin:0 1rem .5rem}
.settings-shortcuts .btn{min-height:44px;padding:0 .8rem;white-space:nowrap}
@media (max-width:24rem){.settings-shortcuts{gap:.3rem}.settings-shortcuts .btn{padding:0 .55rem;font-size:.875rem}}
.settings-out-menu>summary{gap:.25rem}
.settings-out-menu>summary .icon{width:1rem;height:1rem;transform:rotate(90deg)}
.settings-out-menu[open]>summary .icon{transform:rotate(-90deg)}
@media (min-width:62rem){
  .settings-shortcuts .settings-out-menu{position:relative}
  .settings-shortcuts .settings-out-menu[open]>summary::before{background:none}
  .settings-shortcuts .settings-out-menu .sheet{position:absolute;top:calc(100% + .35rem);bottom:auto;left:auto;right:0;width:max-content;min-width:13rem;max-width:20rem;margin:0;padding:.35rem;border:1px solid var(--border);border-radius:.9rem;box-shadow:0 8px 24px rgba(0,0,0,.22);gap:.25rem}
  .settings-shortcuts .settings-out-menu .sheet::before,.settings-shortcuts .settings-out-menu .sheet-title{display:none}
  .settings-shortcuts .settings-out-menu .sheet-item{min-height:2.75rem;padding:0 .9rem;border-radius:.6rem;background:none}
  .settings-shortcuts .settings-out-menu .sheet-item:hover{background:var(--surface)}
}
@media (min-width:62rem) and (prefers-reduced-motion:no-preference){.settings-shortcuts .settings-out-menu[open] .sheet{animation:menu-in .12s ease-out}}
.stack{display:flex;flex-direction:column;gap:.35rem;max-width:26rem}
.stack label{font-weight:600;margin-top:.4rem}
.stack input{min-height:44px;border:1px solid var(--border-strong);border-radius:.6rem;padding:0 .75rem;background:var(--bg);color:var(--text);font:inherit}
.stack .btn{margin-top:.75rem;align-self:flex-start}
.badge{display:inline-block;padding:.05rem .5rem;border-radius:999px;font-size:.8em;font-weight:600;background:var(--surface);color:var(--text-muted);border:1px solid var(--border)}
.badge.ok{color:var(--accent)}
.notice.error{border-color:var(--danger);color:var(--danger);font-weight:600}
.hint{margin:0;font-size:.85em;color:var(--text-muted)}
.check{display:flex;gap:.6rem;align-items:flex-start;margin-top:.75rem}
.check input{width:24px;height:24px;margin:0;flex:none}
.check label{font-weight:400;margin:0}
.form-error{color:var(--danger);font-weight:600;display:flex;gap:.4rem}
.form-error::before{content:"⚠"}
.oauth{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (forced-colors:active){.act[aria-pressed=true]{border:2px solid CanvasText}.marker.trend-mark{font-weight:700}}
.feed-mode{font-size:.875em;color:var(--text-muted);margin:.5rem 1rem}
/* "Para você | Mais recentes": two halves, the chosen one underlined in the accent */
.feed-tabs{margin:0;border-bottom:1px solid var(--border)}
.feed-tabs [role=group]{display:grid;grid-template-columns:1fr 1fr}
.feed-tabs button{position:relative;min-height:48px;border:0;background:none;color:var(--text-muted);font:inherit;font-weight:600;cursor:pointer}
.feed-tabs button[aria-pressed=true]{color:var(--text)}
.feed-tabs button[aria-pressed=true]::after{content:"";position:absolute;left:50%;bottom:0;width:3.5rem;height:3px;margin-left:-1.75rem;border-radius:3px;background:var(--accent)}
.feed-tabs button:hover{background:var(--surface)}
.settings{padding:1rem;margin:1rem 0}
.settings h2{font-size:1.05em;margin:0 0 .5rem}
/* its own tint and no outline: never taken for a field or a box to type in (those are
   --bg or --surface with a border) */
.notice{padding:.5rem 1rem;border:1px solid transparent;border-radius:.5rem;background:var(--highlight-bg)}

/* ---------- unconfirmed e-mail banner: pinned under the header ---------- */
.verify-banner{position:sticky;top:calc(var(--header-h) - 1px);z-index:9;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding:.7rem 1rem;border-bottom:1px solid var(--border);background:var(--highlight-bg)}
.verify-text{flex:1 1 16rem;min-width:0}
.verify-banner p{margin:.1rem 0 0;font-size:.9em;color:var(--text-muted)}
.verify-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.verify-actions form{margin:0}
.verify-actions .btn{min-height:40px;padding:0 .9rem;font-size:.9em}
.only-narrow-text{display:none}
@media (max-width:40rem){.only-wide-text{display:none}.only-narrow-text{display:block}.verify-banner{padding:.55rem 1rem}}

/* ---------- invite ---------- */
.invite{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding:.85rem 1rem;border-bottom:1px solid var(--border)}
.invite-text{flex:1 1 14rem;min-width:0}
.invite p{margin:.1rem 0 0;font-size:.9em;color:var(--text-muted)}
.invite-link{display:block;width:100%;min-height:44px;margin:.25rem 0 1rem;padding:0 .75rem;border:1px solid var(--border-strong);border-radius:.75rem;background:var(--bg);color:var(--text);font:inherit}
.share-btn .icon{width:1.1rem;height:1.1rem}

/* ---------- toasts: compact inverted pill at the bottom (Threads/Instagram style) ---------- */
.toasts{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;display:flex;flex-direction:column;align-items:center;gap:.5rem;width:min(26rem,calc(100% - 1.5rem));pointer-events:none}
.toast{pointer-events:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:.25rem;width:100%;padding:.3rem .3rem .3rem 1rem;border-radius:1rem;background:var(--text);color:var(--bg);font-size:.95em;font-weight:500;line-height:1.35;box-shadow:0 8px 28px rgb(0 0 0/.25);animation:toast-in .25s cubic-bezier(.2,.9,.3,1.2)}
.toast p{margin:.55rem 0}
.toast form{grid-column:1;grid-row:2;margin:-.2rem 0 .3rem}
.toast .toast-link{grid-column:1;grid-row:2;justify-self:start;display:inline-flex;align-items:center;margin:-.2rem 0 .3rem}
.toast .btn{min-height:36px;padding:0;border:0;background:none;color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:.2em}
.toast-action{grid-column:2;grid-row:1;min-height:44px;padding:0 .8rem;border:0;border-radius:999px;background:transparent;color:inherit;font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.toast-action:hover{background:rgb(127 127 127/.25)}
.toast.with-action{grid-template-columns:minmax(0,1fr) auto auto}
.toast.with-action .toast-close{grid-column:3}
.toast-close{grid-column:2;grid-row:1;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:1.35em;line-height:1;cursor:pointer}
.toast-close:hover{background:rgb(127 127 127/.25)}
.toast.out{opacity:0;transform:translateY(10px) scale(.97);transition:opacity .18s,transform .18s}
@keyframes toast-in{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@media (min-width:62rem){.toasts{bottom:1.5rem}}
.to-top{position:fixed;right:1rem;bottom:calc(5.6rem + env(safe-area-inset-bottom));z-index:25;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--border);background:var(--bg);color:var(--text);box-shadow:0 6px 20px rgb(0 0 0/.15);cursor:pointer;-webkit-tap-highlight-color:transparent}
.to-top[hidden]{display:none}
.to-top .icon{width:1.4rem;height:1.4rem}
.to-top:active{transform:scale(.92)}
@media (min-width:62rem){.to-top{bottom:1.5rem;right:calc(50% - 31rem)}}

/* ---------- busy state: spinner + label, no double submit ---------- */
.busy{cursor:progress!important;opacity:.85}
.busy::before{content:"";width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;flex:none}
.act-form .busy::before{display:none}
.act-form .busy{opacity:.6}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}.toast.out{transition:none}.busy::before{animation-duration:2s}}
/* composer photos */
.photo-pick,.sens-pick{cursor:pointer;color:var(--text-muted)}
.photo-pick svg,.sens-pick svg{width:1.35rem;height:1.35rem}
.photo-input:focus-visible+.photo-pick{outline:3px solid var(--focus);outline-offset:2px;border-radius:.5rem}
.photo-previews:empty{display:none}
.photo-previews{display:flex;gap:.5rem;overflow-x:auto;padding:.4rem 0;scroll-snap-type:x proximity}
.photo-thumb{position:relative;flex:none;width:9.5rem;scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1fr);gap:.35rem}
.photo-thumb img,.video-thumb video{display:block;width:100%;height:12rem;object-fit:cover;border-radius:.9rem;border:1px solid var(--border)}
.video-thumb video{background:#000}
.video-thumb .play-mark{bottom:auto;height:12rem}
.photo-alt-btn{position:absolute;left:.4rem;top:10.2rem;border:0;border-radius:999px;padding:.2rem .6rem;background:rgba(0,0,0,.7);color:#fff;font:inherit;font-size:.78em;font-weight:600;cursor:pointer}
.photo-alt-btn[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
.photo-alt-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.photo-thumb input[name=alt]{width:100%;min-width:0;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:.2rem 0;background:transparent;color:var(--text);font-size:max(16px,.8em)!important}
.photo-thumb input[name=alt]:focus{outline:none;border-bottom-color:var(--accent)}
.photo-crop-btn{position:absolute;left:.4rem;top:.55rem;border:0;border-radius:999px;padding:.2rem .6rem;background:rgba(0,0,0,.7);color:#fff;font:inherit;font-size:.78em;font-weight:600;cursor:pointer}
.photo-crop-btn[aria-busy=true]{opacity:.6;cursor:progress}
.photo-crop-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* cutting a photo: the frame stays in the middle, the photo moves under it */
.crop-dialog{border:0;padding:0;margin:auto;width:min(100%,32rem);max-width:100vw;max-height:100vh;max-height:100dvh;overflow-y:auto;background:transparent;color:var(--text)}
.crop-dialog::backdrop{background:rgba(0,0,0,.6)}
.crop-sheet{margin:.5rem;padding:1rem;display:grid;gap:.75rem;background:var(--bg);border-radius:1.25rem;box-shadow:0 8px 30px rgba(0,0,0,.3)}
.crop-sheet h2{font-size:1.05em;margin:0}
.crop-stage{position:relative;height:min(56vh,24rem);height:min(56dvh,24rem);overflow:hidden;border-radius:.9rem;background:#0b0c0f;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.crop-stage:active{cursor:grabbing}
.crop-stage:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.crop-img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;pointer-events:none;-webkit-user-drag:none}
.crop-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 100vmax rgb(0 0 0/.55);outline:1.5px solid rgb(255 255 255/.85);pointer-events:none}
.crop-dialog.round .crop-frame{border-radius:50%}
.crop-hint{margin:0;font-size:.85em}
@media (hover:none) and (pointer:coarse){.crop-keys{display:none}} /* touch only: no keys to tell */
.crop-aspects{display:flex;gap:.4rem;flex-wrap:wrap}
.crop-aspects[hidden]{display:none}
.crop-aspects button{min-height:2.5rem;padding:0 .9rem;border-radius:999px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit;font-size:.9em;cursor:pointer}
.crop-aspects button[aria-pressed=true]{background:var(--text);border-color:var(--text);color:var(--bg)}
.crop-zoom{display:flex;align-items:center;gap:.75rem;font-size:.9em}
.crop-zoom input{flex:1;min-height:2.75rem;accent-color:var(--accent)}
.crop-actions{display:flex;justify-content:flex-end;gap:.5rem}
html.crop-open{overflow:hidden}
.photo-remove{position:absolute;top:.3rem;right:.3rem;width:2rem;height:2rem;border-radius:50%;border:0;background:rgba(0,0,0,.7);color:#fff;font-size:1.2rem;line-height:1;cursor:pointer}
.photo-remove:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* search */
.search-form{display:flex;gap:.5rem;align-items:center;margin:.25rem 0 1rem}
.search-form input{flex:1;min-width:0;border-radius:999px;padding:.6rem 1rem}
.search-section{margin:0 0 1.25rem}
/* an empty list: its note close under the heading, lined up with it */
.search-section>p.empty,.activity>p.empty{padding:.25rem 1rem .5rem;margin:0;text-align:start}
.search-section>h2,.search-head h2{font-size:1em;margin:.5rem 0}
/* views under the post page title, as in Threads */
.post-views{margin:0;color:var(--text-muted);font-size:.8em;font-weight:400}
.search-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.see-all{font-size:.9em;font-weight:600;color:var(--accent);text-decoration:none}
.see-all:hover{text-decoration:underline}
.search-box{position:relative;flex:1;min-width:0;display:flex}
/* tabs: one kind of result at a time; the line under the current one, like the feed's */
.search-tabs{display:flex;gap:.25rem;margin:-.25rem 0 1rem;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.search-tabs a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;color:var(--text-muted);font-weight:600;text-decoration:none;white-space:nowrap}
.search-tabs a:hover{color:var(--text)}
.search-tabs a[aria-current=page]{color:var(--text)}
.search-tabs a[aria-current=page]::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:0;height:3px;border-radius:3px;background:var(--accent)}
/* the Timeline's two lists ("Para você" / "Seguindo"): half the width each, at the top */
.feed-switch{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0}
.feed-switch a{justify-content:center;min-height:48px}
.feed-switch a:hover{background:var(--surface)}
.feed-switch a[aria-current=page]::after{left:50%;right:auto;width:3.5rem;margin-left:-1.75rem}
.following-empty{padding:0 1rem 1rem}
.following-empty>p.empty{padding:2rem 0 1rem}
.following-empty>p.muted{text-align:center;color:var(--text-muted)}
.follow-suggest-title{margin:.5rem 0;font-size:1rem}
/* suggestions under the box while typing */
.suggest{position:absolute;z-index:30;top:calc(100% + .35rem);left:0;right:0;margin:0;padding:.3rem;list-style:none;max-height:min(22rem,60vh);overflow-y:auto;background:var(--bg);border:1px solid var(--border-strong);border-radius:1rem;box-shadow:0 8px 24px rgb(0 0 0/.18)}
.suggest[hidden]{display:none}
.suggest [role=option]{display:flex;gap:.65rem;align-items:center;min-height:44px;padding:.3rem .6rem;border-radius:.7rem;color:var(--text);cursor:pointer}
.suggest [aria-selected=true],.suggest [role=option]:hover{background:var(--surface)}
.suggest .who{display:flex;flex-direction:column;min-width:0}
.suggest .name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest .handle,.suggest .n{color:var(--text-muted);font-size:.88em}
.suggest .topic{font-weight:600}
.recent-searches ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.recent-searches a{display:inline-flex;align-items:center;min-height:36px;padding:0 .85rem;border-radius:999px;background:var(--surface);color:var(--text);text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-tips{margin:1rem 0;color:var(--text-muted);font-size:.92em}
.search-tips summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.search-tips dl{display:grid;grid-template-columns:max-content 1fr;gap:.4rem .9rem;margin:.25rem 0 0}
.search-tips dt code{color:var(--text);background:var(--surface);padding:.1rem .4rem;border-radius:.4rem}
.search-tips dd{margin:0}
.people{list-style:none;margin:0;padding:0}
.people li a{display:flex;gap:.75rem;align-items:center;padding:.5rem 0;color:var(--text);text-decoration:none}
.people .who{display:flex;flex-direction:column;min-width:0}
.people .who .name{font-weight:700}
.people .who .handle{color:var(--text-muted);font-size:.9em}
.people .who .reason{color:var(--text-muted);font-size:.85em}
.topic-hits{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.topic-hits a{display:inline-flex;gap:.4rem;align-items:baseline;padding:.4rem .8rem;border:1px solid var(--border-strong);border-radius:999px;color:var(--text);text-decoration:none}
.topic-hits .n{color:var(--text-muted);font-size:.85em}
/* without JS the file input stays visible (chosen files are listed by the browser) */
/* without JavaScript the browser's own file fields show: each on its line, "Postar" at the
   right below them (in one row it went off the side on a phone) */
html:not(.js) .composer-foot{flex-wrap:wrap}
html:not(.js) .composer-foot .photo-input{flex:1 1 calc(100% - 3.5rem);min-width:0;max-width:calc(100% - 3.5rem);font-size:.85em}
html:not(.js) .composer-foot .send{margin-left:auto}
.js .photo-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html:not(.js) .photo-pick{display:none}
html:not(.js) .photo-input{max-width:100%;font-size:.85em!important}
/* a tap in the menu shows at once: thin bar on top while the next page loads */
.navigating body::before{content:"";position:fixed;top:0;left:0;height:3px;width:100%;z-index:100;background:var(--accent);transform-origin:left;animation:nav-load 1.2s ease-out forwards}
@keyframes nav-load{from{transform:scaleX(.05)}to{transform:scaleX(.85)}}
@media (prefers-reduced-motion:reduce){.navigating body::before{animation:none;transform:scaleX(.6)}}
main.standalone{max-width:36rem;margin:3rem auto;padding:0 1rem}
/* sheets (repost, more options): one button, a sheet with the choices */
.menu-sheet{display:inline-flex}
.menu-sheet>summary{list-style:none}
.menu-sheet>summary::-webkit-details-marker{display:none}
.repost-menu>summary[data-on=true]{color:var(--accent)}
/* the backdrop is part of the summary: tapping outside the sheet closes it (no JS) */
.menu-sheet[open]>summary::before{content:"";position:fixed;inset:0;z-index:59;background:rgba(0,0,0,.4);cursor:default}
/* (pressed, the "⋯" does not shrink: a transform would hold the backdrop in its box, and the
   tap outside, landing elsewhere, would close nothing) */
.menu-sheet[open]>summary:active{transform:none;background:none}
.menu-sheet .sheet{position:fixed;z-index:60;left:0;right:0;bottom:0;margin-inline:auto;max-width:30rem;background:var(--bg);color:var(--text);border-radius:1.25rem 1.25rem 0 0;padding:.6rem 1rem calc(1rem + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.25);display:grid;gap:.6rem}
.menu-sheet .sheet::before{content:"";justify-self:center;width:2.5rem;height:4px;border-radius:2px;background:var(--border-strong)}
.sheet-title{margin:0;text-align:center;font-weight:700}
.sheet-item{display:flex;width:100%;align-items:center;justify-content:space-between;min-height:3.25rem;padding:0 1.1rem;border:0;border-radius:1rem;background:var(--surface);color:var(--text);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.sheet-item .icon{width:1.4rem;height:1.4rem}
.sheet-item.danger{color:var(--danger)}
.sheet-item:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.menu-sheet form{margin:0}
.more-menu{margin-left:auto}
@media (prefers-reduced-motion:no-preference){.menu-sheet[open] .sheet{animation:sheet-up .18s ease-out}}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
/* inside a box (new post, answer): on a computer a small menu by the "⋯", in the box (a sheet
   at the foot of the page was outside it, under its backdrop); on a phone the sheet over the
   box, and a toast goes to the top while it is open (seen, and its "Desfazer" reached). */
@media (min-width:62rem){
  .js .reply-panel.open .menu-sheet{position:relative}
  .js .reply-panel.open .menu-sheet[open]>summary::before{background:none}
  .js .reply-panel.open .menu-sheet .sheet{position:absolute;top:100%;bottom:auto;left:auto;right:0;width:max-content;min-width:13rem;max-width:20rem;margin:0;padding:.35rem;border:1px solid var(--border);border-radius:.9rem;box-shadow:0 8px 24px rgba(0,0,0,.22);gap:.25rem}
  .js .reply-panel.open .menu-sheet.up .sheet{top:auto;bottom:100%}
  .js .reply-panel.open .menu-sheet .sheet::before{content:none}
  .js .reply-panel.open .menu-sheet .sheet-item{min-height:2.75rem;gap:1rem;padding:0 .9rem;border-radius:.6rem}
}
@media (min-width:62rem) and (prefers-reduced-motion:no-preference){.js .reply-panel.open .menu-sheet[open] .sheet{animation:menu-in .12s ease-out}}
@media (min-width:62rem){.side-nav .account-menu[open] .sheet{animation:none}}
@media (min-width:62rem) and (prefers-reduced-motion:no-preference){.side-nav .account-menu[open] .sheet{animation:menu-in .12s ease-out}}
@keyframes menu-in{from{opacity:0}to{opacity:1}}
@media (max-width:61.99rem){html.panel-open:has(.reply-panel.open .menu-sheet[open]) .toasts{top:calc(.75rem + env(safe-area-inset-top));bottom:auto}}

/* ---------- edited posts and the edit page ---------- */
/* "Autor": the conversation's author answering (small, legible in both themes) */
.op-badge{display:inline-flex;align-items:center;flex:none;align-self:center;padding:.05rem .45rem;border-radius:999px;background:var(--surface);background:color-mix(in srgb,var(--accent) 16%,var(--bg));color:var(--text);font-size:.75rem;font-weight:600;line-height:1.35;white-space:nowrap}
.people li{display:flex;align-items:center;gap:.5rem}
.people li>a{flex:1 1 auto;min-width:0}
.post-head .edited{color:var(--text-muted);font-size:.9em;white-space:nowrap}
.post-head .edited::before{content:"· "}
.edit-form{padding:1rem}
.edit-form .compose-input{min-height:8rem;max-height:none;margin-top:.4rem;padding:.75rem 1rem;border:1px solid var(--border);border-radius:1rem;background:var(--surface)}
.edit-note{color:var(--text-muted);font-size:.9em;margin:.5rem 0}
.edit-actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex-wrap:wrap}
.edit-actions .counter{margin-right:auto}

/* our share sheet (no share sheet on the device): same look as the other sheets */
.share-dialog{border:0;padding:0;margin:auto auto 0;width:100%;max-width:30rem;background:transparent;color:var(--text)}
.share-dialog::backdrop{background:rgba(0,0,0,.4)}
.share-dialog .sheet{background:var(--bg);border-radius:1.25rem 1.25rem 0 0;padding:.6rem 1rem calc(1rem + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.25);display:grid;gap:.6rem}
.share-dialog{max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}
.share-dialog .sheet-title{font-size:1em;margin:.25rem 0}
/* the apps two by two: the whole sheet (copy and close included) fits a small phone */
.share-apps{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.share-dialog .sheet-item{justify-content:center}
.share-apps .sheet-item{min-height:3rem;padding:0 .75rem}
.share-dialog .cancel{justify-content:center;background:transparent;border:1px solid var(--border)}
.share-dialog .sheet:focus{outline:none} /* opened by mouse: the sheet takes focus, no ring on the first app */
/* the dialog itself moves (not the sheet inside it): nothing overflows on the way in, so no
   scrollbar flickers and nothing shakes; on the computer it rises a little and fades in */
@media (prefers-reduced-motion:no-preference){.share-dialog[open]{animation:sheet-up .18s ease-out}}
@media (min-width:62rem){
  .share-dialog{margin:auto}.share-dialog .sheet{border-radius:1.25rem}
  @media (prefers-reduced-motion:no-preference){.share-dialog[open]{animation:sheet-pop .16s cubic-bezier(.2,.8,.3,1)}}
}
/* sign-up: the Terms / Privacy notice over the form (a sheet on the phone, a window on the
   computer); only the text scrolls, the title and the ✕ stay */
.legal-dialog{border:0;padding:0;margin:auto auto 0;width:100%;max-width:40rem;max-height:92dvh;background:transparent;color:var(--text);overflow:hidden}
.legal-dialog::backdrop{background:rgba(0,0,0,.4)}
.legal-sheet{display:flex;flex-direction:column;max-height:92dvh;background:var(--bg);border-radius:1.25rem 1.25rem 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.25);padding-bottom:calc(.75rem + env(safe-area-inset-bottom))}
.legal-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.35rem .35rem .35rem 1rem;border-bottom:1px solid var(--border)}
.legal-top h2{font-size:1.05em;margin:0}
.legal-body{flex:1;min-height:9rem;overflow-y:auto;overscroll-behavior:contain;padding:0 1rem}
.legal-body:focus:not(:focus-visible),.legal-dialog.by-pointer .legal-body:focus{outline:none}
html.legal-open{overflow:hidden}
.legal-body .legal-note{margin:1.25rem 0}
.legal-sheet>.btn.wide{width:auto;margin:.75rem 1rem 0}
@media (prefers-reduced-motion:no-preference){.legal-dialog[open]{animation:sheet-up .18s ease-out}}
@media (min-width:62rem){
  .legal-dialog{margin:auto;max-height:85vh}.legal-sheet{border-radius:1.25rem;max-height:85vh}
  @media (prefers-reduced-motion:no-preference){.legal-dialog[open]{animation:sheet-pop .16s cubic-bezier(.2,.8,.3,1)}}
}
@keyframes sheet-pop{from{opacity:0;transform:translateY(.5rem) scale(.985)}to{opacity:1;transform:none}}

/* ---------- small delights (only when the device allows motion) ----------
   like: the heart squeezes, pops past its size and settles, with a ring of dots;
   repost: the arrows turn; the counts roll; the header leans the logo once scrolled. */
.act .count{display:inline-block}
.act.like{position:relative}
@media (prefers-reduced-motion:no-preference){
  .act.pop .icon{animation:heart-pop .5s cubic-bezier(.34,1.56,.64,1)}
  .act.unpop .icon{animation:heart-unpop .25s ease-out}
  .act.like.pop::after{content:"";position:absolute;left:1.15rem;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;pointer-events:none;
    box-shadow:0 -15px 0 var(--like),13px -7.5px 0 var(--accent),13px 7.5px 0 var(--like),0 15px 0 var(--accent),-13px 7.5px 0 var(--like),-13px -7.5px 0 var(--accent);
    animation:like-burst .55s ease-out forwards}
  .act.repost.pop .icon,.repost-menu>summary.pop .icon{animation:repost-turn .55s cubic-bezier(.34,1.56,.64,1)}
  .act .count.roll-up{animation:roll-up .3s cubic-bezier(.2,.8,.2,1)}
  .act .count.roll-down{animation:roll-down .3s cubic-bezier(.2,.8,.2,1)}
  .act .icon{transition:transform .15s ease-out}
  .act.share:active .icon{transform:translateY(-3px)}
  .act.reply:active .icon{transform:rotate(-10deg)}
  .btn{transition:transform .12s ease-out,background-color .15s,box-shadow .15s}
  .btn:active{transform:scale(.96)}
  .bottom-nav .icon{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
  .bottom-nav a:active .icon{transform:scale(.8)}
  .bottom-nav a[aria-current=page] .icon{animation:nav-here .4s cubic-bezier(.34,1.56,.64,1)}
  header.top{transition:box-shadow .3s ease,background-color .3s ease}
  .brand-mark,.wordmark .dot{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
  .wordmark .dot{transform-box:fill-box;transform-origin:center}
  .scrolled .brand-mark{transform:rotate(-8deg) scale(.9)}
  .scrolled .wordmark .dot{transform:translateY(1.2px) scale(.8)}
  .send.sending .send-label{animation:send-breathe 1.3s ease-in-out infinite}
  .send.sent{animation:send-done .4s cubic-bezier(.34,1.56,.64,1)}
  .send.sent .send-check path{stroke-dasharray:22;stroke-dashoffset:22;animation:check-draw .3s .05s ease-out forwards}
  .send.shake{animation:send-shake .32s ease-in-out}
  .wordmark.play .hollow path{animation:wm-hollow 1.1s cubic-bezier(.45,0,.25,1) both}
  .wordmark.play .hollow path:nth-child(2){animation-delay:.06s}
  .wordmark.play .hollow path:nth-child(3){animation-delay:.12s}
  .wordmark.play .hollow path:nth-child(4){animation-delay:.18s}
  .wordmark.play .hollow path:nth-child(5){animation-delay:.24s}
  .wordmark.play .hollow path:nth-child(6){animation-delay:.3s}
  .wordmark.play .hollow path:nth-child(7){animation-delay:.36s}
  .wordmark.play .hollow path:nth-child(8){animation-delay:.42s}
}
.scrolled header.top{box-shadow:0 6px 20px rgb(0 0 0/.12)}
@keyframes heart-pop{0%{transform:scale(1)}15%{transform:scale(.7)}55%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes heart-unpop{50%{transform:scale(.8)}}
@keyframes like-burst{0%{transform:scale(.55);opacity:0}20%{opacity:1}70%{opacity:1}100%{transform:scale(1.25);opacity:0}}
@keyframes repost-turn{from{transform:rotate(0)}to{transform:rotate(180deg)}}
@keyframes roll-up{from{transform:translateY(70%);opacity:0}to{transform:none;opacity:1}}
@keyframes roll-down{from{transform:translateY(-70%);opacity:0}to{transform:none;opacity:1}}
@keyframes send-breathe{50%{opacity:.6}}
@keyframes send-done{40%{transform:scale(1.06)}100%{transform:none}}
@keyframes check-draw{to{stroke-dashoffset:0}}
@keyframes send-shake{20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}
@keyframes wm-hollow{0%,100%{stroke-width:0}40%,58%{stroke-width:1.2px}}
@keyframes nav-here{0%{transform:scale(.8)}100%{transform:scale(1)}}

/* ---------- "Não tenho interesse": the post folds into a one-line note ---------- */
.post-hidden{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid var(--border);color:var(--text-muted);font-size:.9em}
.post-hidden p{margin:0}
/* waiting for the answer: the post dims (the sheet already closed), a second tap does nothing */
article.post[aria-busy=true]{opacity:.55;pointer-events:none;cursor:progress}
.post-hidden .link-btn{min-height:44px;flex:none;padding:0 .5rem;border:0;background:none;color:var(--accent);font:inherit;font-weight:600;cursor:pointer}
@media (prefers-reduced-motion:no-preference){
  article.post.folding{transition:opacity .2s ease,transform .2s ease;opacity:0;transform:scale(.98)}
  .post-hidden{animation:note-in .25s ease-out}
}
@keyframes note-in{from{opacity:0}to{opacity:1}}

/* ---------- "Tem interesse neste post?": a quiet question under an exploration post ---------- */
.ask-interest{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem .75rem;margin-top:.4rem;padding:.5rem .1rem 0;border-top:1px solid var(--border);color:var(--text-muted);font-size:.88em}
.ask-interest .ask-q{margin:0;flex:1 1 12rem}
.ask-interest.answered{flex-wrap:nowrap}
.ask-btns{display:flex;gap:.4rem;flex-wrap:wrap}
.ask-btns form{margin:0}
.ask-btn{min-height:44px;padding:0 .8rem;border:1px solid var(--border);border-radius:999px;background:none;color:var(--text);font:inherit;font-weight:600;cursor:pointer;transition:background .15s,transform .1s}
.ask-btn:hover{background:var(--surface)}
.ask-btn:active{transform:scale(.96)}
.ask-btn[aria-busy=true]{opacity:.55;cursor:progress}
.ask-interest[aria-busy=true] .ask-btn{pointer-events:none}
.ask-interest .link-btn{min-height:44px;padding:0 .5rem;border:0;background:none;color:var(--accent);font:inherit;font-weight:600;cursor:pointer}
@media (prefers-reduced-motion:no-preference){.ask-interest.answered{animation:note-in .25s ease-out}}

/* ---------- report ---------- */
.report{padding:0 1rem 2rem}
.report-post{margin:.75rem 0 1rem;pointer-events:none}
.report-form fieldset{border:0;margin:0 0 1rem;padding:0}
.report-form legend{font-weight:700;margin-bottom:.5rem}
/* sign-up: the field a person never sees nor reaches (a script filling everything fills it) */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.report-reason{display:flex;align-items:center;gap:.75rem;min-height:48px;padding:0 .25rem;border-bottom:1px solid var(--border);cursor:pointer}
.report-reason input{width:1.15rem;height:1.15rem;accent-color:var(--accent);margin:0}
.report-form label[for]{display:block;font-weight:600;margin:.5rem 0 .35rem}
.report-form textarea,.profile-form textarea{box-sizing:border-box;width:100%;border:1px solid var(--border-strong);border-radius:.6rem;padding:.6rem .75rem;background:var(--bg);color:var(--text);font:inherit;resize:vertical}
.report-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}
.report-actions .btn.danger{background:var(--danger);border-color:var(--danger);color:var(--bg)}

/* ---------- Novidades ---------- */
/* a dot on the menu item while something is unseen (small, no number to chase) */
.bottom-nav a,.side-nav a{position:relative}
.news-dot{position:absolute;top:.85rem;left:calc(50% + .4rem);width:.6rem;height:.6rem;border-radius:50%;background:var(--like);box-shadow:0 0 0 2px var(--bg)}
.side-nav .news-dot{position:static;margin-left:-.35rem;align-self:flex-start;margin-top:.85rem}
@media (prefers-reduced-motion:no-preference){.news-dot{animation:dot-in .4s cubic-bezier(.34,1.56,.64,1)}}
@keyframes dot-in{from{transform:scale(0)}}
.news-tabs{margin:0}
.news-list{list-style:none;margin:0;padding:0}
.news-item{border-bottom:1px solid var(--border)}
.news-item.is-new{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.news-row{display:grid;grid-template-columns:2.5rem 1fr;gap:.75rem;padding:.85rem 1rem}
/* answers, quotes, mentions: the line above, the post itself under it */
.news-item>.post{border-bottom:0;padding-top:.35rem}
.news-row:has(+.post){padding-bottom:0}
/* the photo of who did it, the action in a round badge on its corner */
.news-who{position:relative;width:2.5rem;height:2.5rem}
.news-badge{position:absolute;right:-.3rem;bottom:-.3rem;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:50%;color:#fff;background:var(--text-muted);box-shadow:0 0 0 2px var(--bg)}
.news-badge .icon{width:.8rem;height:.8rem}
.news-badge.k-like{background:var(--like)}
.news-badge.k-repost{background:#16a34a}
.news-badge.k-reply{background:#2563eb}
.news-badge.k-quote{background:#ea580c}
.news-badge.k-mention{background:#0d9488}
.news-badge.k-follow{background:#7c3aed}
.news-main{min-width:0}
.news-faces{display:flex;gap:.15rem;margin-bottom:.4rem}
.news-faces .avatar{box-shadow:0 0 0 2px var(--bg)}
.news-line{margin:0;overflow-wrap:anywhere}
.news-line .name{font-weight:700;color:var(--text);text-decoration:none}
.news-line .name:hover{text-decoration:underline}
.news-line .when{color:var(--text-muted)}
.news-meta{white-space:nowrap}
.news-new{display:inline-block;padding:.05rem .5rem;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:.75em;font-weight:700;vertical-align:.12em}
.news-excerpt{display:block;margin-top:.3rem;color:var(--text-muted);text-decoration:none;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-excerpt:hover{color:var(--text)}
.news-follow-back{margin-top:.5rem}
.js .news-list article.post{cursor:pointer}

/* ---------- "Seus interesses": the network (SVG drawn on the server) and the list ---------- */
.interests-page{padding:0 1rem 2rem}
.interests-page h1{margin:.25rem 0 .4rem}
.interests-page .back-link{margin:.75rem 0 0}
.interests-page .back-link a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-muted);text-decoration:none;font-weight:600}
.interests-page .notice{margin:.75rem 0}
.imap{margin:1rem 0 1.25rem}
.imap svg{display:block;width:100%;max-width:560px;height:auto;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:1.25rem}
.imap .links line{stroke:var(--text-muted);stroke-linecap:round}
.imap .node circle{stroke-width:1.5;transition:stroke-width .15s}
.imap .node.n-topic circle{fill:color-mix(in srgb,var(--accent) 20%,var(--bg));stroke:var(--accent)}
.imap .node.n-person circle{fill:color-mix(in srgb,var(--focus) 22%,var(--bg));stroke:var(--focus)}
.imap .node text{fill:var(--text);font-weight:700;pointer-events:none}
.imap .node:hover circle{stroke-width:3}
.imap-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.1rem;margin-top:.6rem;color:var(--text-muted);font-size:.85em}
.imap-legend .lg{display:inline-flex;align-items:center;gap:.4rem}
.imap-legend .lg::before{content:"";width:.8rem;height:.8rem;border-radius:50%;border:1.5px solid}
.imap-legend .lg-topic::before{background:color-mix(in srgb,var(--accent) 20%,var(--bg));border-color:var(--accent)}
.imap-legend .lg-person::before{background:color-mix(in srgb,var(--focus) 22%,var(--bg));border-color:var(--focus)}
.imap-legend .lg-line::before{width:1.1rem;height:0;border-radius:0;border-width:2px 0 0;border-color:var(--text-muted)}
@media (prefers-reduced-motion:no-preference){
  /* the network grows in, strongest first, then its links appear */
  .imap .node{transform-box:fill-box;transform-origin:center;animation:node-in .45s cubic-bezier(.2,.8,.3,1.2) both}
  .imap .node.d1{animation-delay:.05s}.imap .node.d2{animation-delay:.1s}.imap .node.d3{animation-delay:.15s}
  .imap .node.d4{animation-delay:.2s}.imap .node.d5{animation-delay:.25s}.imap .node.d6{animation-delay:.3s}
  .imap .node.d7{animation-delay:.35s}
  .imap .links{animation:note-in .5s ease-out .35s both}
}
@keyframes node-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.interests-page h2{font-size:1.05em;margin:1.25rem 0 .25rem}
.interest-list{list-style:none;margin:0;padding:0}
.interest-list li{display:flex;align-items:center;gap:.75rem;padding:.35rem 0;border-bottom:1px solid var(--border)}
.interest-name{flex:1;min-width:0;display:flex;align-items:center;gap:.6rem;min-height:44px;color:var(--text);font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.interest-list .strength{color:var(--text-muted);font-size:.85em}
.interest-remove{margin:0}
.btn.small{min-height:44px;padding:0 .9rem;font-size:.9em}
.muted.small{font-size:.85em;margin-top:1rem}

/* ---------- language switch (footer, sign-in pages, settings) ---------- */
/* (the label keeps about the choices' own gap from them: their padding hangs out) */
.lang-form{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem 1.25rem;margin:.5rem 0 0}
.lang-form .lang-label{color:var(--text-muted)}
/* the choices wrap as a row of their own, lined up as the form is (centred where it is);
   their padding hangs out at the sides, so their words line up with the label */
.lang-form [role=group]{display:flex;flex-wrap:wrap;justify-content:inherit;column-gap:.25rem;margin-inline:-.35rem}
.lang-form .link-btn{min-height:44px;padding:0 .35rem;border:0;background:none;color:var(--accent);font:inherit;cursor:pointer}
.lang-form .link-btn[aria-pressed=true]{color:var(--text);font-weight:700;text-decoration:underline;text-underline-offset:.25em}
.site-footer .lang-form{font-size:inherit}
.auth-card .lang-form{justify-content:center;margin-top:1rem}
.legal-lang{border:1px solid var(--border);border-radius:1rem;margin:1rem}

/* the offline page (no navigation): the logo, what happened, what to do */
body.bare main{max-width:32rem;margin:0 auto;padding:max(2rem,env(safe-area-inset-top)) 1.25rem 2rem;border:0;min-height:0}
.offline{margin-top:8vh;display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.offline h1{margin:0;font-size:1.6rem}
.offline p{margin:0;line-height:1.5}

/* Novidades: the invitation to notifications on this device */
.push-invite{margin:0 1rem 1rem;display:flex;flex-direction:column;gap:.75rem}
.push-invite p{margin:0}
.push-invite-actions{display:flex;gap:.5rem;flex-wrap:wrap}
/* Configurações → Notificações */
.push-device{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;margin:.75rem 0 1rem}
.push-state:empty{display:none}
.push-kinds fieldset{border:0;margin:0;padding:0}
.push-kinds legend{font-weight:600;padding:0}
.push-kinds .btn{margin-top:1rem}
/* ---------- skeleton: what comes, in grey, while another tab or list loads ---------- */
.skel-gone{display:none!important}
.skel-item{display:flex;gap:.75rem;padding:.9rem 1rem;border-bottom:1px solid var(--border)}
.skel-body{flex:1;display:flex;flex-direction:column;gap:.55rem;min-width:0;padding-top:.15rem}
.skel-shape{display:block;position:relative;overflow:hidden;background:var(--surface);background:color-mix(in srgb,var(--text) 9%,var(--bg))}
.skel-avatar{flex:none;width:40px;height:40px;border-radius:50%}
.skel-avatar.small{width:32px;height:32px}
.skel-line{height:.75rem;border-radius:.375rem}
.skel-line.w20{width:20%}.skel-line.w30{width:30%}.skel-line.w40{width:40%}.skel-line.w50{width:50%}
.skel-line.w60{width:60%}.skel-line.w70{width:70%}.skel-line.w80{width:80%}.skel-line.w90{width:90%}
.skel-acts{display:flex;gap:2.25rem;margin-top:.4rem}
.skel-dot{width:2rem;height:.75rem;border-radius:.375rem}
/* a light shine passing (still with "reduzir movimento") */
@media (prefers-reduced-motion:no-preference){.skel-shape::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--bg) 55%,transparent),transparent);animation:skel-shine 1.4s ease-in-out infinite}}
@keyframes skel-shine{to{transform:translateX(100%)}}
@media (forced-colors:active){.skel-shape{background:GrayText}}
/* ---------- phones: the menu steps aside going down a list; "ir ao topo" joins the "+" ---------- */
.bottom-nav{transition:transform .25s ease,opacity .25s ease}
.nav-away .bottom-nav{transform:translateY(calc(100% + 1rem + env(safe-area-inset-bottom)));opacity:0;visibility:hidden;transition:transform .25s ease,opacity .25s ease,visibility 0s .25s}
/* the "+" always floats above whatever is pinned to the bottom (no "+" in the menu: like
   X); "ir ao topo" joins it under, going down a list, with the menu away */
.fab-bar{position:fixed;right:1rem;bottom:calc(.6rem + 58px + .75rem + env(safe-area-inset-bottom));z-index:21;display:flex;flex-direction:column;gap:.75rem;pointer-events:none;transition:bottom .25s ease}
.fab-bar>.fab{pointer-events:auto}
html:has(.ad-mobile) .fab-bar{bottom:calc(76px + 66px + .75rem + env(safe-area-inset-bottom))}
html.pwa-on:has(.pwa-band:not(.pwa-yield)) .fab-bar{bottom:calc(var(--pwa-b,84px) + var(--pwa-h,64px) + .75rem)}
.nav-away .fab-bar{bottom:calc(1rem + env(safe-area-inset-bottom))}
/* "Responda a…" stays put and gives the "+" its right end: both on one line, the page no taller */
@media (max-width:61.99rem){
  html:has(.fab-new):has(.reply-bar:not([hidden])) .reply-bar{left:.75rem;transform:none;width:calc(100% - 1.5rem - 52px - .75rem)}
  html:has(.fab-new):has(.reply-bar:not([hidden])) .reply-bar:active{transform:scale(.98)}
  html:has(.reply-bar:not([hidden])) .fab-bar{right:.75rem;bottom:calc(5.6rem - 2px + env(safe-area-inset-bottom))}}
html:not(.nav-away) .fab-top{display:none}
/* typing (the keyboard is up): out of the way */
html:has(:is(input,textarea,select,[contenteditable=true]):focus) .fab-bar{display:none}
@media (prefers-reduced-motion:no-preference){.nav-away .fab-top{animation:fab-in .2s ease-out}}
@keyframes fab-in{from{opacity:0;transform:translateY(.75rem)}}
/* the end of the page scrolls clear of a "+" raised over the ad or "Responda a…" */
@media (max-width:61.99rem){html:has(.fab-new):has(.ad-mobile) main{padding-bottom:calc(13.5rem + env(safe-area-inset-bottom))}}
/* a toast sits beside the buttons, never over them */
@media (max-width:61.99rem){
  html:has(.fab-new) .toasts,.nav-away .toasts{left:calc(50% - 2.75rem);width:min(26rem,calc(100% - 7rem))}
  .nav-away .toasts{bottom:calc(1rem + env(safe-area-inset-bottom))}}
.fab{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--border);background:var(--bg);color:var(--text);box-shadow:0 6px 20px rgb(0 0 0/.15);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.fab .icon{width:1.5rem;height:1.5rem}
.fab-new{background:var(--accent);color:var(--on-accent);border-color:transparent}
.fab:active{transform:scale(.92)}
/* on a phone the list's own "ir ao topo" gives way to this one; on a computer nothing moves */
@media (max-width:61.99rem){.to-top{display:none!important}}
@media (min-width:62rem){.fab-bar{display:none}}
@media (prefers-reduced-motion:reduce){.bottom-nav,.nav-away .bottom-nav,.fab-bar{transition:none}}
/* silenced accounts: a folded post says whose it is and opens on a tap */
.muted-post{border-bottom:1px solid var(--border)}
.muted-post>details>summary{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem .5rem;align-items:center;min-height:48px;padding:.75rem 1rem;color:var(--text-muted);cursor:pointer}
.muted-post>details>summary::-webkit-details-marker{display:none}
.muted-post .muted-open{color:var(--accent);font-weight:600}
.muted-post>details[open]>summary .muted-open{display:none}
.quoted.quoted-muted{display:block;color:var(--text-muted)}
/* "Conteúdo sensível": a soft cover with the note and "Ver mesmo assim"; once open, the
   note stays above as one line (the card's own marker would only repeat it) */
.sensitive-post>details>summary{flex-direction:column;justify-content:center;text-align:center;min-height:7rem;margin:.5rem 1rem .75rem;border-radius:12px;border:1px solid var(--border);background:linear-gradient(135deg,color-mix(in srgb,var(--text-muted) 16%,var(--bg)),color-mix(in srgb,var(--text-muted) 6%,var(--bg)))}
.sensitive-post>details>summary .icon{width:1.4rem;height:1.4rem}
.sensitive-post>details[open]>summary{flex-direction:row;justify-content:flex-start;min-height:48px;margin:0;border:0;border-radius:0;background:none;text-align:start}
.sensitive-post>details[open]>summary .icon{width:1rem;height:1rem}
.sensitive-post .sensitive-mark{display:none}
.sens-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sens-input:focus-visible+.sens-pick{outline:3px solid var(--focus);outline-offset:2px}
.sens-input:checked+.sens-pick{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg))}
.sens-note{display:none;margin:.25rem 0 0;font-size:.85em;color:var(--text-muted)}
.sens-note .icon{width:.95rem;height:.95rem;vertical-align:-.15em}
.composer:has(.sens-input:checked) .sens-note{display:block}
.quoted.quoted-muted .quoted-open{color:var(--accent);font-weight:600}
.muted-notice{display:flex;flex-direction:column;gap:.75rem;align-items:flex-start;margin:.75rem 0}
.muted-notice p{margin:0}
.muted-list{padding:0 1rem}
.muted-list form{flex:none}
.profile-actions .profile-menu{flex:none}
.profile-actions .profile-menu>.btn{flex:none;min-width:0;width:2.75rem;padding:0;justify-content:center;border-radius:50%}
.page-intro{margin:1rem 0}
/* Palavras ocultas: the field and its button side by side, the list below */
.words-page{padding:0 1rem 1rem}
/* a note after the form: apart from its button */
.words-page>form+.hint{margin-top:1rem}
.words-add{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.25rem}
.words-add .hint{margin:0;font-size:.9rem}
.words-row{display:flex;gap:.5rem;align-items:stretch}
.words-row input{flex:1 1 auto;min-width:0;min-height:44px}
.words-row .btn{flex:none}
.words-head{font-size:1rem;margin:0 0 .25rem}
.words-list{list-style:none;margin:0;padding:0}
.words-list li+li{border-top:1px solid var(--border)}
.word-row{display:flex;align-items:center;gap:.75rem;min-height:48px;padding:.25rem 0}
.word-row .word{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font-weight:600}
.word-row form{flex:none}
/* Configurações: rows that open their own page (icon, name, value, ›) */
.settings-list{list-style:none;margin:0;padding:0}
.settings-row{display:flex;align-items:center;gap:.75rem;min-height:48px;padding:.5rem 0;color:var(--text);text-decoration:none}
.settings-row .row-name{flex:1 1 auto;font-weight:600}
.settings-row .row-value{color:var(--text-muted)}
.settings-row .icon:last-child{color:var(--text-muted)}
.settings-list li+li{border-top:1px solid var(--border)}

/* ---------- admin area (/admin): plain lists, one column on phones ---------- */
.admin{padding:0 1rem 2rem}
.admin-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.35rem 1rem;padding:1rem 0;border-bottom:1px solid var(--border);margin-bottom:1rem}
.admin-head h1{grid-column:1/-1;margin:0;font-size:1.4rem}
.admin-kicker{margin:0;color:var(--text-muted);font-size:.85em;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
/* the tabs: one line always; what does not fit scrolls sideways, the edge with more fades */
.admin-tabs{grid-column:1/-1;display:flex;flex-wrap:nowrap;gap:.25rem;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding:2px}
.admin-tabs::-webkit-scrollbar{display:none}
.admin-tabs.more-after{mask-image:linear-gradient(to right,#000 calc(100% - 2.5rem),transparent)}
.admin-tabs.more-before{mask-image:linear-gradient(to left,#000 calc(100% - 2.5rem),transparent)}
.admin-tabs.more-before.more-after{mask-image:linear-gradient(to right,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent)}
.admin-tab{flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;border-radius:999px;color:var(--text);text-decoration:none;font-weight:600}
.admin-tab[aria-current=page]{background:var(--surface);border:1px solid var(--border-strong)}
.admin-out{margin:0;grid-column:2;grid-row:1}
.admin-out .btn{min-height:44px}
/* moderation */
.mod-reasons{margin:0 0 .35rem;display:flex;flex-wrap:wrap;gap:.35rem}
.mod-reasons .chip{display:inline-block;padding:.1rem .6rem;border-radius:999px;border:1px solid var(--border-strong);font-size:.85em;font-weight:600}
.mod-item.severe .chip:first-child{border-color:var(--danger);color:var(--danger)}
.mod-meta{margin:0 0 .35rem}
.mod-excerpt,.mod-body{white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 .5rem}
.mod-case{padding:1rem;border:1px solid var(--border);border-radius:.75rem;margin-bottom:1.5rem}
.mod-removed{color:var(--danger);font-weight:600}
.mod-media{display:flex;flex-wrap:wrap;gap:.5rem}
.mod-media img{max-width:min(100%,20rem);height:auto;border-radius:.5rem}
.mod-files{margin:0 0 .35rem;padding-left:1.2rem;overflow-wrap:anywhere}
.mod-hashes{margin:.2rem 0 .35rem;padding-left:1rem;font-size:.85rem}
.mod-abuse{padding:1rem;border:1px solid var(--danger);border-radius:.75rem}
.mod-search{display:flex;flex-direction:column;gap:.35rem;margin:0 0 1.5rem}
.mod-search label{font-weight:600}
.mod-search .muted{margin:0}
.mod-search-row{display:flex;gap:.5rem}
.admin .mod-search input[type=search]{box-sizing:border-box;flex:1;min-width:0;min-height:44px;border:1px solid var(--border-strong);border-radius:.6rem;padding:0 .75rem;background:var(--bg);color:var(--text);font:inherit}
.admin textarea{box-sizing:border-box;width:100%;border:1px solid var(--border-strong);border-radius:.6rem;padding:.5rem .75rem;background:var(--bg);color:var(--text);font:inherit}
.admin .auth-card{padding:0}
.admin-section{margin:0 0 1.5rem}
.admin-section h2{font-size:1.1rem;margin:0 0 .5rem}
.admin-section form{display:flex;flex-direction:column;gap:.35rem;max-width:26rem}
.admin-section label,.admin-revoke label,.admin-filter label{font-weight:600}
.admin input[type=text],.admin input[type=email],.admin input[type=number],.admin select{box-sizing:border-box;min-height:44px;width:100%;border:1px solid var(--border-strong);border-radius:.6rem;padding:0 .75rem;background:var(--bg);color:var(--text);font:inherit}
.admin-section form .btn{align-self:flex-start;margin-top:.5rem}
.admin-list{list-style:none;margin:0;padding:0}
.admin-list>li{padding:.75rem 0;border-top:1px solid var(--border)}
.admin-list>li:first-child{border-top:0}
/* gone: the name in the quieter colour (not opacity: the small text would lose its contrast) */
.admin-member.revoked .admin-who>:first-child{color:var(--text-muted);font-weight:500}
.admin-gone{margin-top:.75rem;border-top:1px solid var(--border)}
.admin-gone>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
/* a fold's own arrow (a flex summary has no marker; Safari's is hidden for the same look) */
.admin-gone>summary::-webkit-details-marker,.admin-audit summary::-webkit-details-marker{display:none}
.admin-gone>summary::before,.admin-audit summary::before{content:"";width:.45em;height:.45em;margin:0 .6em 0 .1em;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .15s}
.admin-gone[open]>summary::before,.admin-audit details[open]>summary::before{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.admin-gone>summary::before,.admin-audit summary::before{transition:none}}
.admin-who{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .5rem}
.admin-meta{margin:.25rem 0 0;overflow-wrap:anywhere}
.admin-badge{display:inline-block;padding:.05rem .5rem;border-radius:999px;font-size:.8em;font-weight:600;background:var(--surface);color:var(--text-muted);border:1px solid var(--border)}
.admin-revoke{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem;margin:.5rem 0 0}
.admin-revoke input{max-width:9rem}
.admin-links{padding-left:1.2rem}
.admin-links li{margin:.25rem 0}
.admin-links a{display:inline-block;min-height:44px;line-height:44px}
.admin-steps{padding-left:1.2rem}
.admin-steps>li{margin:.5rem 0}
.admin-qr{margin:.75rem 0;width:12rem;max-width:100%;line-height:0}
.admin-qr svg{width:100%;height:auto;border-radius:.5rem}
.admin-key{font-size:1rem;word-spacing:.3em;overflow-wrap:anywhere;user-select:all}
.admin-codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.5rem;list-style:none;margin:1rem 0;padding:0}
.admin-codes code{display:block;padding:.5rem;border:1px solid var(--border);border-radius:.5rem;background:var(--surface);font-size:1rem;text-align:center;user-select:all}
/* two-step verification (twofactor.rs) */
.two-step-settings{margin:1.5rem 0 0;padding:1rem 0 0;border-top:1px solid var(--border)}
.two-step-settings h3{margin:0 0 .25rem}
.two-step-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.two-step-actions .btn{min-height:44px}
.two-step form{display:flex;flex-direction:column;gap:.35rem}
.admin-stats>li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1rem}
.admin-stats strong{font-variant-numeric:tabular-nums;font-size:1.1rem}
.admin-table{overflow-x:auto}
.admin-table table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.admin-table th,.admin-table td{padding:.6rem .5rem;border-top:1px solid var(--border);text-align:right;white-space:nowrap}
.admin-table th:first-child{text-align:left;padding-left:0;white-space:normal}
.admin-table:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.admin-table thead th{border-top:0;color:var(--text-muted);font-size:.9em}
.admin-filter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem;margin:0 0 1rem}
.admin-filter label{flex:1 1 100%}
.admin-filter select{flex:1 1 12rem;width:auto}
.admin-audit details{margin-top:.4rem}
.admin-audit summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--accent);font-weight:600}
.admin-tuning{display:flex;flex-direction:column;gap:1rem;max-width:34rem}
.admin-group{margin:0;padding:1rem 0 0;border:0;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:1rem}
.admin-group legend{float:left;width:100%;padding:0;margin:0 0 .35rem;font-size:1.1rem;font-weight:700}
.admin-group legend+.hint{clear:both;margin-top:-.75rem}
.admin-field{display:flex;flex-direction:column;gap:.3rem}
.admin-field label{font-weight:600}
.admin-field input[aria-invalid=true]{border-color:var(--danger)}
.admin-tuning>.btn{align-self:flex-start}
/* what Enter presses in a field: there for the browser, not seen (the visible "Salvar" is at the end) */
.admin-enter{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;opacity:0}
.admin-section>.hint{margin:.75rem 0 0}
.admin-field>.hint p{margin:0 0 .3rem}
.admin-field>.hint p:last-child{margin-bottom:0}
.admin-example{color:var(--text)}
.admin-live{font-variant-numeric:tabular-nums;font-weight:600}
.admin-field label .admin-live{font-weight:700}
.admin-input{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.admin-input input[type=number]{flex:0 1 11rem;width:11rem;min-width:0}
.admin-input .btn{flex:0 0 auto}
.admin-how{border:1px solid var(--border);border-radius:.75rem;background:var(--surface);padding:0 1rem}
.admin-how>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
.admin-how>summary::-webkit-details-marker{display:none}
.admin-how>summary::before{content:"";flex:0 0 auto;width:.45em;height:.45em;margin:0 .6em 0 .1em;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .15s}
.admin-how[open]>summary::before{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.admin-how>summary::before{transition:none}}
.admin-how-body{padding:0 0 1rem;font-size:.95em}
.admin-how-body p{margin:.5rem 0}
.admin-how-body ul{margin:.25rem 0;padding-left:1.2rem}
.admin-how-example{margin-top:.75rem;padding-top:.5rem;border-top:1px solid var(--border)}
.admin-calc{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.admin-winner{font-weight:600}
.js .admin-nojs,html:not(.js) .admin-js{display:none}
.admin-review{border-top:1px solid var(--border);padding-top:1rem}
.admin-review h2{font-size:1.1rem;margin:0 0 .5rem}
.admin-changes{margin:.25rem 0 .5rem;padding-left:1.2rem;overflow-wrap:anywhere}
.admin-changes li{margin:.2rem 0}
.admin-review-top{margin:0 0 1rem}
.admin-review-top h2{font-size:1.1rem;margin:0 0 .5rem}
.admin-review-top p{margin:.5rem 0}
.admin-review-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.admin-audit pre{margin:.25rem 0 .5rem;padding:.5rem;border-radius:.5rem;background:var(--surface);overflow-x:auto;font-size:.85em}
.accept-terms h1{margin:0 0 .75rem;font-size:1.4rem}
.accept-terms-docs{margin:.5rem 0 1rem;padding-left:1.2rem;display:flex;flex-direction:column;gap:.5rem}
.accept-terms-docs a{font-weight:600}
.accept-terms form{margin-top:1rem;display:flex;flex-direction:column;gap:1rem}
.accept-terms .check{margin-top:0}
.admin-legal{display:flex;flex-direction:column;gap:1rem;max-width:40rem}
.admin-legal>.btn{align-self:flex-start}
.admin-legal-body{width:100%;min-height:16rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;resize:vertical}

/* ---------- pull to refresh: the finger draws the name in the header (app.js) ----------
   Pulling empties the letters to their outline (the hollow line fades in) and fills them
   back left to right as the finger goes (each letter's hollow line drawn away by
   stroke-dashoffset, every letter measuring 1); at the refresh point the two green dots
   pop back. Released: a short green line runs through each letter while it loads, a beat
   later in each (`--ptr-i`, the letter's place, set by app.js, any number of letters),
   then the name settles. Only transform, opacity and stroke-dashoffset move. The
   browser's own pull (Chrome's reload) is off where this one is on; Safari's bounce stays. */
html.ptr-on{overscroll-behavior-y:contain}
/* "reduce motion" (and forced colours): the name stays still, a quiet note says it instead */
.ptr-note{position:absolute;left:50%;top:100%;margin-top:.5rem;transform:translateX(-50%);padding:.4rem .9rem;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--text-muted);font-size:.85rem;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0}
.ptr-note:empty{display:none}
@media (prefers-reduced-motion:no-preference){
  .wordmark.ptr-pull{transform:translateY(var(--ptr-y,0))}
  .wordmark.ptr-pull .hollow{stroke-width:1.2px;opacity:0}
  .wordmark.ptr-pull .hollow path{stroke-dasharray:1 2}
  .wordmark.ptr-pull .dot{transform:scale(0);transition:transform .14s ease-in}
  .wordmark.ptr-ready .dot{transform:none;transition:transform .5s cubic-bezier(.28,1.9,.5,1)}
  .wordmark.ptr-ready .dot:last-of-type{transition-delay:.05s}
  .wordmark.ptr-busy .hollow{opacity:1}
  .wordmark.ptr-busy .hollow path{stroke:#14a374;stroke-dasharray:.3 2;animation:ptr-run 1.8s cubic-bezier(.4,0,.6,1) infinite both;animation-delay:calc(var(--ptr-i,0)*.11s)}
  .wordmark.ptr-settle{animation:ptr-settle .6s cubic-bezier(.3,0,.3,1) both}
  .wordmark.ptr-settle .hollow{opacity:0;transition:opacity .2s ease-out}
  .wordmark.ptr-back{transform:none;transition:transform .34s cubic-bezier(.3,1.5,.5,1)}
  .wordmark.ptr-back .hollow{opacity:0;transition:opacity .22s ease-out}
  .wordmark.ptr-back .dot{transform:none;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
}
@keyframes ptr-run{0%{stroke-dashoffset:.35}28%,100%{stroke-dashoffset:-1.1}}
@keyframes ptr-settle{0%{transform:translateY(var(--ptr-y,0))}40%{transform:translateY(-1.2px)}70%{transform:translateY(.4px)}100%{transform:none}}

/* ---------- "ir ao topo": two chevrons (two taps); after the first tap the upper one lights
   up and lifts a hair while a second tap still counts (app.js `again`) ---------- */
.fab-top.again .cue{stroke:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .fab-top .cue{transition:stroke .12s ease-out,transform .2s cubic-bezier(.3,1.6,.5,1)}
  .fab-top.again .cue{transform:translateY(-1.5px)}
}

/* the error code under a reason ("Código do erro: …"): one tap selects it whole, to copy */
.toast .toast-code{grid-column:1;margin:-.35rem 0 .55rem;font-size:.85em;font-weight:400;opacity:.85;user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}
.error-code{font-size:.9em;user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}
/* ---------- the suggestion to install the app (phones; app.js shows it) ---------- */
/* over the page like the bottom menu, right above it (--pwa-b: what is pinned below):
   nothing is pushed aside when it comes; the page's end gets room for it */
.pwa-band{position:fixed;z-index:19;left:.75rem;right:.75rem;bottom:var(--pwa-b,84px);max-width:28rem;margin:0 auto;max-height:calc(100dvh - var(--pwa-b,84px) - var(--header-h) - .5rem);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--border-strong);border-radius:1.1rem;background:var(--bg);color:var(--text);box-shadow:0 8px 30px rgb(0 0 0/.2);outline:none;transition:opacity .2s ease,transform .2s ease,visibility 0s}
.pwa-band:focus-visible{box-shadow:0 0 0 3px var(--focus)}
.pwa-row{display:flex;align-items:center;gap:.6rem;padding:.4rem .3rem .4rem .6rem}
.pwa-icon{flex:none;width:36px;height:36px;border-radius:.6rem}
.pwa-text{flex:1 1 auto;min-width:0;line-height:1.3}
.pwa-text strong{display:block;font-size:.95em}
.pwa-lead{display:block;font-size:.85em;color:var(--text-muted)}
.pwa-go{flex:none;padding:0 .8rem;font-size:.92em}
.pwa-later{flex:none;color:var(--text-muted)}
.pwa-steps{padding:.1rem 1rem .8rem;border-top:1px solid var(--border);font-size:.92em;line-height:1.4}
.pwa-steps ol{margin:.7rem 0 0;padding:0;list-style:none;counter-reset:pwa;display:grid;gap:.55rem}
.pwa-steps li{display:flex;align-items:flex-start;gap:.55rem;counter-increment:pwa}
.pwa-steps li::before{content:counter(pwa);flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:.8em;font-weight:700}
.pwa-steps li>.icon,.pwa-steps li>.pwa-glyph,.pwa-add,.pwa-step-icon{flex:none;width:1.3rem;height:1.3rem;margin-top:.05rem;color:var(--accent);text-align:center;font-weight:700;line-height:1.3rem}
.pwa-step-icon{border-radius:.3rem}
.pwa-add{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:2px solid currentColor;border-radius:.35rem}
.pwa-add .icon{width:.85rem;height:.85rem;stroke-width:3}
.pwa-note{display:flex;align-items:flex-start;gap:.5rem;margin:.7rem 0 0;color:var(--text-muted)}
.pwa-note .icon{flex:none;width:1.1rem;height:1.1rem;margin-top:.1rem}
/* steps aside: behind it the sign-up/sign-in form or the new-post box, a field being
   typed in (the keyboard is up), or the menu going away while reading down a list */
.pwa-band.pwa-yield,.nav-away .pwa-band:not(:focus-within),html:has(:is(input,textarea,select,[contenteditable=true]):focus) .pwa-band{opacity:0;visibility:hidden;transform:translateY(.75rem);pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility 0s .2s}
html.pwa-on{scroll-padding-bottom:calc(var(--pwa-b,84px) + var(--pwa-h,64px) + .5rem)}
html.pwa-on:not(.nav-away) .toasts{bottom:calc(var(--pwa-b,84px) + var(--pwa-h,64px) + .5rem)}
@media (max-width:61.99rem){html.pwa-on main{padding-bottom:max(9rem,calc(var(--pwa-b,84px) + var(--pwa-h,64px) + 1rem))}}
@media (prefers-reduced-motion:reduce){.pwa-band,.pwa-band.pwa-yield{transition:none}}

/* ---------- "Seguir" ---------- */
/* on the profile the form takes a button's place: same share of the row */
.profile-actions .follow-form{flex:1 1 0;min-width:9rem;display:flex;margin:0}
.profile-actions .follow-form .btn{flex:1 1 auto;min-width:0}
/* not following yet: the filled button (the one action a visitor came for) */
.follow-form:not(:has(input[name=desfazer])) .follow-btn,.profile-actions .btn.follow-login{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.people li .follow-form{flex:none;margin:0}
.follow-form[data-busy] button{opacity:.6;cursor:progress;pointer-events:none}
li.person-row[aria-busy=true]{cursor:progress}
.follow-locked{margin:.25rem 0;color:var(--text-muted);font-size:.9em;flex-basis:100%}
.people li .follow-locked{flex:0 1 12rem;flex-basis:auto;margin:0}
.profile-follows{display:flex;flex-wrap:wrap;gap:0 1rem;margin:.25rem 0 0}
.profile-follows a{color:var(--text-muted);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:.25rem}
.profile-follows a:hover,.profile-follows a:focus-visible{text-decoration:underline}
.follow-list{padding:0 1rem}
.follow-more{display:flex;justify-content:center;padding:1rem}
form[data-busy] button[aria-busy=true]{opacity:.6;cursor:progress}