/* Trupe layout and components. Values come from tokens.css. Motion lives at the bottom and switches off with reduced motion. */
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html,body{height:100%}
/* v7 paper: warm, with the faint dot grid of the landing. */
body{background:var(--paper);background-image:radial-gradient(var(--dots) 1px,transparent 1.2px);background-size:22px 22px;
  color:var(--ink);font:400 var(--t-md)/var(--lh) var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--peng);outline-offset:3px;border-radius:6px}
h1,h2,h3{text-wrap:balance;font-family:var(--serif);font-weight:800;letter-spacing:var(--track-title);line-height:1.02}
h3{letter-spacing:-.02em;line-height:1.15}
p{text-wrap:pretty}
/* v7 eyebrow: a small label in caps, heavy, the way the landing marks a section; the handwritten one is .hand. */
.mono{font:700 11.5px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.hand{font:700 22px/1 var(--hand);color:var(--ink-2);letter-spacing:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Every scroller holds its absolute children (.vh, hidden inputs): without it they hang below the viewport and the page scrolls as a whole */
.side-scroll,.home,.page,.msgs,.rail{position:relative}
.ic{width:18px;height:18px;flex:none;display:block}
.ic.sm{width:15px;height:15px}
svg.m{display:block;overflow:visible}
/* T369: the brand seal is .logo img of jointrupe.com: the fox wash behind, a 1.5px ink border at any size, the fox inside it. */
svg.m.mark{box-sizing:border-box;border-radius:50%;background:var(--fox-w);border:1.5px solid var(--edge-ink);overflow:hidden}
/* T282: on a dark theme the critter's black outline vanishes: a soft stage light behind the whole animal and a thin light
   line around its drawing (both nothing on Papel). The penguin, navy on a dark card, needs both. */
svg.m.m-whole{background:radial-gradient(closest-side,var(--halo),transparent 72%)}
svg.m.m-whole .m-body image{filter:var(--rim)}
body.ro [data-write],body:not(.admin) [data-admin]{display:none!important}
.hint{font-size:var(--t-sm);color:var(--ink-3);padding:4px 8px}
.sp{flex:1}

/* frame */
.app{display:grid;grid-template-columns:76px 284px minmax(0,1fr);height:100dvh}
/* T281: on the desktop the crachá starts closed and the conversation takes the width. Open, its column grows from 0 and
   pushes the conversation; the crachá keeps its own width and slides in from the edge as the column opens. Closed, it
   is hidden (visibility), so nothing in it takes a click or a Tab. */
@media (min-width:1181px){
  body[data-view="chat"] .app{grid-template-columns:76px 284px minmax(0,1fr) 0px;overflow:clip}
  body.rail-open[data-view="chat"] .app{grid-template-columns:76px 284px minmax(0,1fr) 420px}
  body[data-view="chat"] .rail{width:420px;justify-self:start;visibility:hidden}
  body.rail-open[data-view="chat"] .rail{visibility:visible}
}
/* Between the overlay breakpoint and 1366 the rail at 420 leaves the chat too narrow: it takes 360 there. */
@media (min-width:1181px) and (max-width:1365px){body.rail-open[data-view="chat"] .app{grid-template-columns:76px 284px minmax(0,1fr) 360px}
  body[data-view="chat"] .rail{width:360px}}
/* T136: the list column only for Conversas and Configurações; the other destinations take the width next to the rail. */
body.no-list .side{display:none}
body.no-list .app{grid-template-columns:76px minmax(0,1fr)}
/* T144: .side-scroll{display:flex} comes later with the same weight, so .side-cfg is scoped up to hide; otherwise the
   index painted in Config stayed under Rodas de conversa after coming back to Conversas. */
.side .side-cfg,body[data-dest="config"] #sidechat{display:none}
body[data-dest="config"] .side .side-cfg{display:flex}
.rail{display:none}
body[data-view="chat"] .rail{display:flex}
body[data-view="login"] .side,body[data-view="login"] .dock{display:none}
body[data-view="login"] .app{grid-template-columns:1fr}

/* T136: the rail of destinations. One 64px column, every tile on the same axis; icon over a short name. */
.dock{background:var(--card);border-right:var(--edge);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px;overflow-y:auto;overflow-x:hidden;min-height:0}
.dk-org{width:40px;height:40px;border-radius:12px;background:var(--fox-w);color:var(--ink);border:var(--edge);display:grid;place-items:center;font:800 18px/1 var(--serif);flex:none}
/* T360: the company's logo in the same tile, on white (logos are drawn for a light ground, in every theme). */
.dk-org.has-logo{background:var(--logo-tile);overflow:hidden}
.dk-org>img{width:100%;height:100%;object-fit:contain;display:block}
.dk-sep{width:32px;height:2px;border-radius:2px;background:var(--rule);margin:8px 0 4px;flex:none}
.dock .sp{min-height:12px}
.dk{width:68px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0 6px;border-radius:12px;color:var(--ink-3);font:600 10.5px/1.2 var(--sans);position:relative;flex:none;text-align:center;white-space:nowrap;overflow:hidden;transition:background var(--dur)}
.dk .ic{width:22px;height:22px}
.dk:hover{background:var(--bear-w);color:var(--ink)}
.dk[aria-current="true"]{background:var(--bear-w);color:var(--ink);box-shadow:0 0 0 1.5px var(--edge-ink)}
.dk[aria-current="true"] .ic{color:var(--ink)}
.dk .tbadge{position:absolute;top:2px;right:8px;height:16px;min-width:16px;padding:0 4px;font-size:10px;box-shadow:0 0 0 2px var(--paper-2)}
.dk-me{width:36px;height:36px;border-radius:50%;background:var(--peri-wash);color:var(--ink);border:var(--edge-s);display:grid;place-items:center;font-weight:600;font-size:14px;margin-top:4px;flex:none}
.dk-me[hidden]{display:none}
.dk-me:hover,body[data-view="perfil"] .dk-me{box-shadow:var(--hard-s)}

/* T136: Configurações, the index in the list column (and on top of Seu perfil on the phone), Mais and Ajuda. */
.side-cfg{gap:4px}
.cfg-h{font:800 24px/1.1 var(--serif);letter-spacing:-.02em;margin:0;padding:0 6px 6px}
.side-cfg .sec-t{padding-top:14px}
.cfg-rows{display:flex;flex-direction:column;gap:2px}
.cfg-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r1);min-height:44px;color:var(--ink);transition:background var(--dur)}
.cfg-row:hover,.cfg-row[aria-current="true"]{background:var(--bear-w)}
.cfg-row[aria-current="true"]{box-shadow:0 0 0 1.5px var(--edge-ink)}
.cfg-row>.ic{color:var(--ink-3);flex:none}
.cfg-t{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.25}
.cfg-t b{font-weight:600;font-size:14px;text-wrap:pretty}
.cfg-t small{font-size:12px;color:var(--ink-3);text-wrap:pretty}
.cfg-adm{font:700 10.5px/1 var(--sans);letter-spacing:.04em;color:var(--peri-ink);background:var(--peri-wash);border:1.5px solid var(--edge-ink);border-radius:99px;padding:3px 7px;flex:none;white-space:nowrap}
.page.more .cfg-rows,.help-pg .cfg-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--track)),1fr));gap:14px;margin-bottom:24px}
.page.more .cfg-row,.help-pg .cfg-row{background:var(--card);border:var(--edge-s);border-radius:var(--r2);padding:12px 14px;min-height:56px}
.page.more .cfg-row:hover,.help-pg .cfg-row:hover{box-shadow:var(--lift)}
.help-pg .cfg-t small{white-space:normal}
.page.more .sec-t{padding:0 0 8px}
.page.more>.pane-h{margin-bottom:var(--s6)}
.cfg-mobile{display:none}
.home-rodas{display:none}

/* left: the trupe */
.side{border-right:var(--edge);padding:18px 14px 12px;display:flex;flex-direction:column;gap:14px;overflow:hidden;min-height:0}
/* Only the lists scroll; the brand on top and the footer with the person's chip stay pinned. */
.side-scroll{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:var(--s5);margin:0 -6px;padding:0 6px;overscroll-behavior:contain}
/* T144: Rodas de conversa breathes below the last agent of Sua trupe. */
#sidechat{gap:var(--s8)}
/* Every scrollbar in the app (chat, Roda, sidebar, badge, lists, modals): thin, thumb in the paper palette, transparent track.
   Firefox: scrollbar-*; Chrome/Safari: ::-webkit-scrollbar (gated, because Chrome 121+ drops the ::-webkit-scrollbar rules,
   6px width and hover included, once scrollbar-width is set). Scrollers that hide their bar (.aw-cards, .att-tray) win on specificity. */
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--line-2) 55%,var(--pencil))}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px}
.brand .m{width:36px;height:36px}
.brand b,.brand-m b{font:800 24px/1 var(--serif);letter-spacing:-.04em}
.brand .mono{margin-left:auto;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-t{display:flex;align-items:center;justify-content:space-between;padding:0 6px 8px}
/* T425: in the side list the hand underline of Sua trupe and Salas sat 4px over the first row, so a hovered or open row's pill
   all but touched it: 8px. */
#sidechat .sec-t{padding-bottom:12px}
.sec-t h2{font:700 21px/1 var(--hand);color:var(--ink-2);letter-spacing:0}
/* T345: the hand-drawn underline of the landing h1 (the same wavy path, round caps), under every group subtitle written by
   hand (.sec-t h2: Você, Organização, Modelos in Configurações, Sua trupe, Rodas de conversa, Conta in Mais, Casos). One
   class, .squig, for any other. The path is a mask, so the color is the theme's fox, and the box is absolute and sits in the
   padding below the word: it spans exactly the word (never past the column edge), is 7px high with a ~2px stroke, never
   moves the list. */
.sec-t h2,.squig{position:relative;isolation:isolate}
.sec-t h2::after,.squig::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:7px;z-index:-1;pointer-events:none;background:var(--fox);
  -webkit-mask:var(--squig-path) center/100% 100% no-repeat;mask:var(--squig-path) center/100% 100% no-repeat}
:root{--squig-path:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 14C40 5 70 20 110 11S180 6 220 13S280 8 296 10' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E")}
.add{display:inline-flex;align-items:center;gap:4px;font:600 12.5px/1 var(--sans);color:var(--terra-ink);padding:6px 8px;border-radius:9px;transition:background var(--dur)}
.add:hover{background:var(--fox-w)}
.add.soft{color:var(--ink-3);font-weight:500}
.add .ic{width:14px;height:14px}
.sec-acts{display:inline-flex;align-items:center;gap:0;flex-shrink:0}
.sec-t h2{min-width:0}
.agents{display:flex;flex-direction:column;gap:2px}
.agent{display:flex;align-items:center;gap:11px;padding:8px;border-radius:15px;transition:background var(--dur),box-shadow var(--dur),transform var(--dur) var(--ease)}
.agent:hover{background:var(--bear-w)}
.agent[aria-current="true"]{background:var(--card);box-shadow:0 0 0 1.5px var(--edge-ink),var(--hard-s)}
.av{width:44px;height:44px;border-radius:50%;box-shadow:0 0 0 1.5px var(--edge-ink);display:grid;place-items:center;flex:none;border:0;padding:0}
.av .m{width:40px;height:40px}
.who{min-width:0;flex:1}
.who b{display:block;font:800 16.5px/1.15 var(--serif);letter-spacing:-.02em}
.who small{display:block;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.dot.busy{background:var(--moss);box-shadow:0 0 0 3px var(--sage-wash)}
.dot.free{background:var(--line-2)}
.dot.ok{background:var(--moss);box-shadow:0 0 0 3px var(--sage-wash)}
.dot.rest{background:var(--honey);box-shadow:0 0 0 3px var(--honey-wash)}
.agent small.wait-s{color:var(--terra-ink);font-weight:600}
.agent small.st-s{font-weight:600}.agent small.st-s.rest{color:var(--honey-ink)}.agent small.st-s.busy{color:var(--ink-2)}
.dot.wait{background:var(--terra);box-shadow:0 0 0 3px var(--terra-wash)}
.roda{display:flex;align-items:center;gap:10px;padding:8px;border-radius:15px}
.faces{display:flex;flex:none}
.face{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;margin-right:-8px;border:1.5px solid var(--edge-ink);box-shadow:0 0 0 2px var(--paper)}
.face .m{width:24px;height:24px}
/* T307: one plain face for someone else's personal integrantes in a sala or mesa (counted, never named) */
.face.unseen{background:var(--peri-wash);color:var(--ink-2)}
.face.unseen .ic{width:55%;height:55%}
/* T414: a person of a sala: the initial of their name on ink, like the people who answered a thread (.cf.pcf) */
.face.pface{background:var(--ink);color:var(--on-ink);font:600 12px/1 var(--sans)}
.roda.big .face.pface,.room-h .face.pface{font-size:14px}
.roda .faces>.initial{margin-right:-8px}
.rt{margin-left:8px;min-width:0}
.rt b{display:block;font:600 13.5px/1.25 var(--sans)}
.rt small{display:block;font-size:12px;color:var(--ink-3)}
/* T371: a sala in the side list is one line of name and one of who is in it, like the integrantes above it; the long one
   ("Ana e 1 integrante pessoal de outra pessoa") ends in "..." with the whole line in its title, instead of a row twice as tall. */
.roda:not(.big) .rt b,.roda:not(.big) .rt small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* T371: the side list of salas on the rhythm of the integrantes over it: 2px apart (they touched) and 60px tall like an
   integrante's row. The name keeps 10px clear of the last face (pulling it to the integrantes' column left 7px). */
#rodas{display:flex;flex-direction:column;gap:2px}
.roda:not(.big){min-height:60px}
/* T367: a sala's faces sit in a slot of fixed width, centred, so its name starts in one column whatever the count (two faces
   at most; past two the second is "+N"). In the side list the slot is the integrantes' 44px avatar and the name lands on
   their text column (11px clear, like theirs); on the big card it is two 38px faces. */
.roda .faces{justify-content:center}
.roda .faces>:last-child{margin-right:0}
.roda .faces+.rt{margin-left:0}
.roda:not(.big) .faces{width:44px}
.roda:not(.big) .face:not(:last-child){margin-right:-12px}
.roda:not(.big) .faces+.rt{margin-left:1px}
.roda.big .faces{width:68px}
/* T414: "+N" in ink like the faces beside it (ink-2 on paper-2 was the faintest thing in the slot), and clear of the
   page-wide .more (margin-top:8px), which dropped it 8px under the face it sits beside */
.face.more{background:var(--paper-2);color:var(--ink);font:700 11px/1 var(--sans);font-variant-numeric:tabular-nums;margin-top:0}
.roda.big .face.more{font-size:13px}

/* buttons, chips, inputs */
/* v7 button: ink edge, hard shadow that grows in fox on hover and presses flat on click. .main is the ink one. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;border-radius:var(--rc);padding:0 14px;font:700 14px/1 var(--sans);border:var(--edge);background:var(--card);color:var(--ink);cursor:pointer;white-space:nowrap;box-shadow:var(--hard-s);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--fox)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--fox)}
.btn.main{background:var(--fill);color:var(--on-fill);border-color:var(--edge-ink);box-shadow:var(--hard-fox)}
.btn.main:hover{box-shadow:var(--hard-hi)}
.btn.soft{background:transparent;border-color:transparent;color:var(--ink-2);box-shadow:none}
.btn.soft:hover{background:var(--bear-w);transform:none;box-shadow:none}
.btn.soft:active{transform:translateY(1px)}
.btn.sm{height:30px;padding:0 10px;font-size:13px;border-radius:10px;border-width:1.5px;box-shadow:2px 2px 0 var(--edge-ink)}
.btn.sm.main{box-shadow:2px 2px 0 var(--fox)}
.btn.sm.soft{box-shadow:none}
/* T397: a small disabled button loses its shadow too (.btn.sm.main outweighed .btn:disabled: a fox shadow under a faded Salvar). */
.btn.sm:disabled{box-shadow:none}
.btn.icon{width:38px;padding:0}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:5px 10px;font:700 12.5px/1 var(--sans);background:var(--paper);border:var(--edge-s);color:var(--ink);white-space:nowrap}
.chip.honey{background:var(--honey-wash);border-color:var(--edge-ink);color:var(--honey-ink)}
.chip.sage{background:var(--sage-wash);border-color:var(--edge-ink);color:var(--rabbit-ink)}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:7px 12px;font:700 12.5px/1 var(--sans);background:var(--paper);color:var(--ink);border:var(--edge-s);white-space:nowrap;transition:transform var(--dur) var(--spring),box-shadow var(--dur)}
.pill.lav{background:var(--peri-wash);border-color:var(--edge-ink);color:var(--peri-ink)}
.input{width:100%;height:42px;border-radius:var(--rc);border:var(--edge-s);background:var(--card);padding:0 12px;transition:border-color var(--dur),box-shadow var(--dur)}
.input:focus{outline:none;border-color:var(--edge-ink);box-shadow:0 0 0 3px var(--owl-w)}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 17px) 18px,calc(100% - 12px) 18px;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}

/* home: badge mural */
.pane{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
/* T359: one page layout for every inside screen. The page uses the width up to --col and, past it, sits centred: the side
   margin is the same on both sides (48px floor, 16px on the phone). With a side panel open (--side) the centre is the area
   left of the panel. The page keeps the place of its scrollbar, so a page that scrolls and one that does not share the edges. */
.home,.page{--gut:48px;--side:0px;--pad:max(var(--gut),(100% - var(--side) - var(--col)) / 2);overflow:auto;height:100%;scrollbar-gutter:stable;
  padding:40px calc(var(--pad) + var(--side)) 48px var(--pad)}
/* T120/T359: one column per inside page. Every first-level block (cards, header with its buttons, notes) takes the column,
   so every block shares both edges. Width is for the layout, not for the line: running text keeps --measure and a
   reading block (form, setup steps, settings) keeps --read, both from the left edge. The Quadro and the conversation are
   the only full-width layouts without the ceiling; onboarding is a split screen of its own. */
.page>*{max-width:var(--col)}
.page.board,.page.onb{--col:100%}
.page>.lede,.page>p.hint,.home-h p{max-width:var(--measure)}
/* T359: the line keeps --measure wherever running text sits on a wide page: help and hint lines, the empty state, a
   section's subtitle and the text inside a reading block (a form at --read is ~110 characters a line, too long to read). */
:is(.page:not(.board,.onb),.home) :is(.lede,.help,.hint,.choice small,.klegend>p>span),
.page:not(.board,.onb) :is(.empty.place,.vblk-h,.form,.pf-grp,.sl-stage) :is(p:not(.note,.gwstate,.gdev-switch),li>span){max-width:var(--measure)}
/* T359: the page intro gets --lede, so a short one sits on one line on the desktop, and never leaves its last word or two alone. */
:is(.page:not(.board,.onb),.home) :is(.page>.lede,.home-h p){max-width:var(--lede);text-wrap:pretty}
/* One rhythm under the page intro on every screen: --s6 to the first block, whatever margin that block brings. */
.page>p.lede{margin-bottom:var(--s6)}
.page>p.lede+*{margin-top:0}
/* Cards sit side by side in tracks of --track, the same on every screen. */
.cgrid,.page .cards,.thr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--track)),1fr));gap:14px;align-items:stretch}
.cgrid>*,.page .cards>*,.thr-list>*{min-width:0}
.page>.formerr:empty{min-height:0;margin-top:0}
.cgrid>.empty.place,.page .cards>.empty.place,.page .cards>p,.thr-list>.empty.place{grid-column:1/-1}
/* The way to add one more (Convidar, Nova mesa) is the first card of the grid. */
.cgrid>.add-card{margin:0;align-content:start;grid-template-columns:minmax(0,1fr) auto;background:var(--card);border:var(--edge-s);border-radius:var(--r2);padding:12px 14px}
.cgrid>.add-card>.add-t,.cgrid>.add-card>.f-wide{grid-column:1/-1}
/* Its button stands beside a field: same 42px height as .input, same axis. */
.cgrid>.add-card .btn{height:42px}
.add-t{font-size:var(--t-md, 16px)}
.cgrid>.tnew{align-content:end}
/* A person's card in the grid: face, name and email on top, across the card; below, on one axis, the role, a new link
   (for who has not come in) and leave. T364: the email had half the card (the new link shared a column with leave) and
   broke mid-word; now it has the whole width, one line, and the controls sit at the foot, on the axis of Convidar. */
.cgrid>.person{display:grid;grid-template-columns:38px minmax(0,1fr) auto 38px;grid-template-areas:"i n n n" "s s r x";align-items:center;align-content:space-between;gap:14px 12px;padding:14px 16px}
.cgrid>.person>.initial{grid-area:i}
.cgrid>.person>div:not(.relink-row){grid-area:n}
.cgrid>.person>select{grid-area:s;width:100%}
.cgrid>.person:not(:has(.relink-row))>select{grid-column:1/4}
.cgrid>.person>.rm{grid-area:x}
.cgrid>.person>.relink-row{grid-area:r;padding:0;margin:0}
.cgrid>.person .relink{height:38px}
/* A narrow card (the phone, or a track near 320px) cannot hold role, new link and leave on one row in every language
   ("Generar nuevo enlace" left the role select 33px for "Miembro"): the new link takes a row of its own below. */
.cgrid>.person{container:person/inline-size}
@container person (max-width:349px){.cgrid>.person>select{grid-column:1/4}.cgrid>.person>.relink-row{grid-column:1/-1;grid-row:3}}
/* A mesa's card in the grid: who sits there and its name on top, its buttons on a row of their own at the right. */
.cgrid>.mesa-card{align-content:space-between}
.cgrid>.mesa-card .tn{flex:1 1 calc(100% - 62px)}
.cgrid>.mesa-card .tacts{flex:1 1 100%;justify-content:flex-end}
.cgrid>.mesa-card.editing .tacts{margin-left:auto}
.home-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand-m{display:none;align-items:center;gap:10px}
.brand-m .m{width:36px;height:36px}
/* T369: the size of the seal on jointrupe.com, 36 and 30 from its 640px breakpoint down. */
@media (max-width:640px){.brand-m .m{width:30px;height:30px}}
/* Who is signed in: on the desktop the sidebar foot already says it (with Sair); the home header says it only where the sidebar hides. */
.me-chip{display:none;gap:6px;align-items:center}
.home-h h1{font-size:clamp(38px,5vw,60px);margin-top:22px}
.home-h p{font-size:18px;color:var(--ink-2);margin-top:12px}
.mural{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px;margin-top:32px;max-width:var(--col)}
.mini{position:relative;min-width:0;display:flex;flex-direction:column;border-radius:var(--r3);border:var(--edge);padding:14px 14px 16px;background:var(--card);min-height:206px;
  box-shadow:var(--hard-s);transition:transform .25s var(--spring),box-shadow .25s}
.mini:not(.add-card){background:var(--tint,var(--card))}
.mini .mono{font-size:10.5px;color:var(--ink-2);padding-right:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .m{width:96px;height:96px;margin:10px auto 6px}
.mini b{font:800 21px/1.1 var(--serif)}
.mini small{font-size:12.5px;color:var(--ink-2)}
.mini .dot{position:absolute;top:15px;right:14px}
.mini small.wait-t{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin-top:3px;padding:3px 9px 3px 7px;border-radius:999px;background:var(--card);border:1.5px solid var(--edge-ink);color:var(--terra-ink);font-weight:600}
.mini small.wait-t .ic{width:14px;height:14px}
.mini small.wait-t{white-space:nowrap;max-width:100%} /* T273: pílula "Esperando você" não quebra por dentro */
.mini:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:var(--hard-hi)}
.mini.add-card{background:transparent;border:1.5px dashed var(--line-2);align-items:center;justify-content:center;gap:10px;color:var(--ink-2);text-align:center;font-size:13.5px;box-shadow:none}
.mini.add-card i{width:48px;height:48px;border-radius:50%;background:var(--bear-w);border:2px dashed var(--edge-ink);display:grid;place-items:center;color:var(--terra-ink)}
.note{display:flex;gap:10px;align-items:flex-start;margin-top:24px;max-width:var(--col);background:var(--honey-wash);border:var(--edge-s);border-radius:var(--r2);padding:12px 14px;font-size:var(--t-sm);color:var(--ink)}
.note .ic{margin-top:1px;color:var(--honey-ink)}

/* home: enquanto você estava fora */
.away:empty{display:none}
.away{margin-top:var(--s8);max-width:var(--col)}
.aw-t{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:0 2px 12px}
.aw-t h2{font:800 22px/1.15 var(--serif)}
.aw-t .mono{font-size:11px;color:var(--ink-3)}
.aw-cards{columns:var(--track) auto;column-gap:14px}  /* T359: columns of --track (the same count and edges as the grid of cards under them), each card at its own height from the top: a short card never stretches to a tall neighbour, and the next one fills the space under it */
.aw-cards:has(>.aw-card:only-child){columns:auto}
.aw-card:last-child{margin-bottom:0}
.aw-card{break-inside:avoid;margin-bottom:14px;background:var(--card);border:var(--edge);border-radius:var(--r3);padding:14px 16px 16px;box-shadow:var(--hard-s)}
.aw-h{display:flex;align-items:center;gap:12px}
.aw-h .face{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--edge-ink);background:var(--tint);display:grid;place-items:center;flex:none;margin:0}  /* T359: not the -8px of a stacked .face: 12px from the name */
.aw-h .face .m{width:44px;height:44px}
.aw-h b{display:block;font:800 19px/1.1 var(--serif)}
.aw-h small{font-size:12px;color:var(--ink-3)}
.aw-card ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.aw-card li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-sm);line-height:1.45;color:var(--ink)}
.aw-card li>span{max-width:var(--measure)}
.aw-card li .ic{flex:none;margin-top:2px;color:var(--terra-ink)}
.aw-card li em{display:block;font:700 10.5px/1.3 var(--sans);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.aw-card li.more{padding-left:25px}
.aw-card li.wait{background:var(--terra-wash);border:1.5px solid var(--edge-ink);border-radius:12px;padding:9px 11px;margin:0 -4px}
.aw-card li.wait em{color:var(--terra-ink)}
.aw-card li .lnk{display:block;margin-top:4px}  /* T37: the link under the text, never glued to a lesson's name */
/* T395 review 2: 12px under the reply, 12px over the answer row (it sits 6px up) and 10px from the ring to the words,
   at 1440 and 390 (the log's gap is --mgap). */
.wait-note{position:relative;margin:calc(var(--s3) - var(--mgap,14px)) 0 calc(var(--s3) + 6px - var(--mgap,14px)) 44px;padding-left:25px;max-width:560px;font-size:12.5px;line-height:1.45;color:var(--terra-ink);font-weight:600;text-wrap:pretty}
.wait-note .ic{position:absolute;left:0;top:1px}
.wait-note span{font-weight:400;color:var(--ink-2)}
/* T395: waiting for the Internet switch, an admin gets "Abrir o Crachá" on its own line under the words. */
.wait-note .btn{display:flex;width:max-content;margin-top:var(--s2)}
.wait-note.has-btn{margin-bottom:calc(var(--s4) + 6px - var(--mgap,14px))}  /* 16px to the answer row (it sits 6px up) */
@media (prefers-reduced-motion:no-preference){.netbox.lit .netsw>i{animation:qFlash 1.5s var(--ease)}}
.back-n{position:relative;align-self:center;padding-left:21px;font-size:12.5px;line-height:1.45;color:var(--ink-2);font-weight:600}
.back-n .ic{position:absolute;left:0;top:1px;color:var(--moss)}
.reread{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-sm);color:var(--ink-2);margin:2px 2px 14px;line-height:1.45}
.reread .ic{flex:none;margin-top:2px;color:var(--peri-ink)}

/* chat */
.chat{display:flex;flex-direction:column;height:100%;background:var(--card);min-height:0}
.chat-h{display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:var(--edge);background:var(--chat-h)}
.chat-h .av{width:52px;height:52px;border-radius:50%;cursor:pointer;background:var(--card)}
.chat-h .av .m{width:48px;height:48px}
.chat-h .who h1{font-size:25px}
.chat-h .who p{font-size:13px;color:var(--ink-3);margin-top:3px;display:flex;align-items:center;gap:10px;min-width:0;white-space:nowrap}
.chat-h .who p span{overflow:hidden;text-overflow:ellipsis}
.chat-h .who{flex:0 1 auto}
/* Desktop header, always one row (T283): with the crachá open the conversation is ~660px and the two ties no longer fit,
   so the header (a container) drops them by its own width, the place first, then who it talks with; the crachá beside it
   says both. The name and role keep their width; the model chip gives way, with an ellipsis, never a second row. */
@media (min-width:761px){
  .chat-h:not(.room-h){flex-wrap:nowrap;container-type:inline-size}
  /* T380: with many rooms the role line ran to ~730px and squeezed the ties and the model chip to a sliver; it ellipsizes at 340px. */
  .chat-h:not(.room-h) .who{flex:0 0 auto;max-width:min(100%,340px);min-width:0}
  .chat-h:not(.room-h) .who h1{white-space:nowrap}
  /* T371: the room line gives way first: its column is minmax(0,max-content), which counts nothing in the header's min-content. */
  .chat-h:not(.room-h) .who p{display:grid;grid-template-columns:minmax(0,max-content) auto;justify-content:start}
  /* T371 (3rd pass): the ties, the lupa and the model never shrink. Shrinking with the name's column, by a fraction of a
     pixel, was enough for "Cantinho só de..." and "Claude Sonnet 5 · Norm..." at 1440. The name's column takes what is
     left, and fitHead (app.js) picks a room line that fits whole, or drops a tie if even the name would be cut. */
  .chat-h:not(.room-h) .who{flex:0 1 auto;min-width:0}
  .chat-h:not(.room-h) .pill.tie{flex-shrink:0}
  /* Only when even the name would be cut and no tie is left to drop (761 to ~1000px), the model gives way, never the name. */
  .chat-h.squeeze:not(.room-h) .who{min-width:var(--who-min,0px)}
  .chat-h.squeeze:not(.room-h) .model-pick{flex-shrink:1}
  /* with no room line, the status is the line's one column (it fell in the room line's, 10px of gap short) */
  .chat-h:not(.room-h) .who p:has(>.role[hidden]){grid-template-columns:auto}
  .chat-h .pill.tie.fit-off{display:none}
  .chat-h:not(.room-h) .model-pick{flex:0 0 auto;min-width:0;max-width:100%}
  /* T351: the model is the last thing on the right, its menu opens from that edge into the conversation. */
  .chat-h:not(.room-h) .model-menu{left:auto;right:0}
  .chat-h:not(.room-h) .pill.model-pill{max-width:100%;min-width:0;overflow:hidden}
  .chat-h:not(.room-h) .sp{flex:1 1 0;min-width:0}
  .chat-h .pill.tie{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;gap:10px}
  .chat-h .pill.tie .pl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* T371: from 1181px, where the ties show, the status sits on the name's line, in the room the name leaves there, so the
   room line under it has the column's whole width ("Salas Atendimento ao cliente e mais 4" at 1440, where beside the
   status only "5 salas" fit and 136px of the header stayed empty).
   If the name itself would be cut there (longer ties, as in Spanish), fitHead puts the status back under it (.st-under)
   before it drops a tie. */
@media (min-width:1181px){
  .chat-h:not(.room-h):not(.st-under) .who{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;gap:var(--s3)}
  .chat-h:not(.room-h):not(.st-under) .who h1{min-width:0}
  .chat-h:not(.room-h):not(.st-under) .who p{display:contents}
  .chat-h:not(.room-h):not(.st-under) .who .st{grid-row:1;grid-column:2}
  .chat-h:not(.room-h):not(.st-under) .who .role{grid-row:2;grid-column:1/-1;margin-top:3px}
}
@container (max-width:940px){.chat-h:not(.room-h) .pill.tie:not(.lav){display:none}}
@container (max-width:860px){.chat-h:not(.room-h) .pill.tie{display:none}}
.chat-h .who .role{min-width:0}
.chat-h .who .st{display:inline-flex;align-items:center;gap:5px;flex:none}
.chat-h .who .st .dot{width:7px;height:7px;box-shadow:none}
.chat-h .back,.badge-btn{display:none}
/* T281: the crachá opens from the face or the name at every width (and from Crachá up to 1180); open, Crachá reads pressed.
   On the desktop there is no Crachá button: next to the two ties it pushed itself onto a row of its own. */
.badge-btn[aria-expanded="true"]{background:var(--bear-w)}
.chat-h .who h1 .who-n{display:flex;align-items:center;gap:6px;max-width:100%;background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;color:inherit;text-align:left;cursor:pointer;white-space:nowrap;border-radius:99px}
.chat-h .who h1 .who-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.chat-h .who-n>.ic{display:none}
/* T347: above 1180, where no Crachá button says it, the face and the name read as one control: a small arrow after the
   name that turns when the crachá opens, and on hover both take a chip's ground (paper, 1.5px ink, as .pill) and a button's cursor.
   The name's padding is pulled back by its margin, so the name stays on the role's left edge. */
@media (min-width:1181px){
  .chat-h .who h1 .who-n{padding:2px 10px 2px 8px;margin:-2px 0 -2px -8px;max-width:calc(100% + 8px)}
  .chat-h .who-n>.ic{display:block;width:16px;height:16px;color:var(--ink-3)}
  .chat-h .who-n[aria-expanded="true"]>.ic{transform:rotate(180deg)}
  .chat-h .av:hover,.chat-h:has(.who-n:hover) .av{box-shadow:0 0 0 3px var(--paper),0 0 0 4.5px var(--edge-ink)}
  .chat-h .who h1 .who-n:hover,.chat-h:has(.av:hover) .who h1 .who-n{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--edge-ink)}
  .chat-h .who-n:hover>.ic,.chat-h:has(.av:hover) .who-n>.ic{color:var(--ink)}
}
@media (min-width:1181px) and (prefers-reduced-motion:no-preference){.chat-h .who-n>.ic{transition:transform .32s var(--ease)}}
/* T347: the one-time balloon under the face, in a person's first conversation on the desktop (badgeTip in app.js).
   T371: it sits in the window's flow under the header, its point on the face, and the conversation starts under it;
   laid over the log it covered the first bubble. */
.badge-tip{position:relative;flex:none;align-self:flex-start;margin:var(--s3) 0 var(--s2) 16px;padding:9px 14px;border-radius:var(--rc);background:var(--bear-w);color:var(--ink);border:var(--edge-s);box-shadow:var(--hard-s);font:700 var(--t-sm)/1.3 var(--sans);white-space:nowrap;pointer-events:none}
.badge-tip::before{content:"";position:absolute;left:28px;top:-7px;width:12px;height:12px;background:inherit;border-left:var(--edge-s);border-top:var(--edge-s);transform:rotate(45deg)}
@media (max-width:1180px){.badge-tip{display:none}}
/* T197: search inside the agent's window. The lupa sits before the model chip; the bar opens under the header, over the
   width of the conversation, and its hits (newest first) scroll inside it, so the conversation stays under them. */
.chat-h .find-btn{flex:none}
.chat-h .find-btn[aria-expanded="true"]{background:var(--bear-w)}
/* T377: on the desktop the lupa is one more chip of the header (.pill: 1.5px ink, pill radius, paper, no hard shadow),
   the same height and axis as Cantinho, Fala com and the model; on the phone it is the Crachá's twin beside it (.btn.sm). */
@media (min-width:761px){
  .chat-h .find-btn{width:auto;height:auto;padding:7px 12px;border:var(--edge-s);border-radius:var(--pill);background:var(--paper);box-shadow:none;transition:transform var(--dur) var(--spring),background var(--dur)}
  .chat-h .find-btn:hover,.chat-h .find-btn:active{transform:none;box-shadow:none}
  /* Up to 1180px the Crachá button joins the row: the chips' 7px over and under, so it has their height (30px was 1px short). */
  .chat-h .badge-btn{height:auto;padding-block:7px}
}
@media (max-width:760px){
  .chat-h .find-btn{border-width:1.5px;border-radius:10px;box-shadow:2px 2px 0 var(--edge-ink)}
  /* Between the lupa and the Crachá the model chip takes their 38px (as Quem responde in the Sala's header). */
  .chat-h .pill.model-pill{height:38px}
  /* The bare back arrow drew the .btn hard shadow as a dark curve under it. */
  .chat-h .back,.chat-h .back:hover,.chat-h .back:active{box-shadow:none;transform:none}
}
/* The panel ends on the conversation with a 2px ink rule, and the conversation, scrolled, fades in under it (.msgs.under,
   the same 24px as under the header), so a bubble cut by the scroll never starts sharp under the panel. T371: it had its own
   32px fade, on even when nothing was cut, and at 1440 it left 4px of the first bubble sharp under 32px of mist.
   While the hits go on below, they fade into the panel (.cf-more), over the hit the edge cuts (peek in bindFind). */
.cfind{flex:none;position:relative;padding:var(--s3) 24px;border-bottom:var(--edge);background:var(--card)}
.cfind.cf-more:not(.folded)::after{content:"";position:absolute;left:24px;right:24px;bottom:var(--s3);height:var(--s10);background:linear-gradient(to bottom,color-mix(in srgb,var(--card) 0%,transparent),var(--card));pointer-events:none}
/* T377: scrolled away from its top, the conversation fades into the header over 24px, so a bubble or a table it cuts
   never starts sharp on the header's ink rule. */
.chat .msgs.under{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--s6));mask-image:linear-gradient(to bottom,transparent,#000 var(--s6))}
.cf-bar{display:flex;align-items:center;gap:var(--s3)}
.cf-bar .msearch{flex:1;min-width:0}
.cf-bar .input{text-overflow:ellipsis}
.cf-bar .btn.icon{width:42px;height:42px;flex:none}
.cf-r{max-height:min(40vh,400px);overflow:auto;overscroll-behavior:contain}
/* T197: the hits end on the X's edge and the bar runs in the panel's padding, 8px clear of them. --sb is the bar's real
   width, read when the panel opens (6px here, 0 where the system floats the bar over the content: phones, macOS). */
.cf-r{scrollbar-gutter:stable}
@media (min-width:761px){.cf-r{margin-right:calc(-1 * (var(--sb, 6px) + var(--s2)));padding-right:var(--s2)}}
.cfind.folded .cf-r{display:none}
.cf-help{margin:var(--s3) 0 var(--s1);font-size:var(--t-sm);line-height:1.45;color:var(--ink-2);max-width:var(--measure);text-wrap:pretty}
.cf-n{margin:var(--s4) 0 var(--s2);font:700 13.5px/1.3 var(--sans);color:var(--ink);display:grid;gap:var(--s1)}
.cf-n span{font:400 12.5px/1.4 var(--sans);color:var(--ink-3)}
.cf-wait{margin-top:var(--s3)}
.cf-list{list-style:none;margin:0;padding:0 0 var(--s1);display:grid;gap:var(--s2)}
.cf-hit{width:100%;display:grid;gap:var(--s2);padding:var(--s3) var(--s4);text-align:left;font:inherit;color:var(--ink);background:var(--card);border:var(--edge-s);border-radius:var(--r2);cursor:pointer}
.cf-hit:hover{background:var(--paper)}
.cf-hit[aria-current="true"]{background:var(--bear-w);box-shadow:var(--hard-s)}
.cf-top{display:flex;align-items:center;gap:var(--s3);min-width:0}
.cf-top .chip{flex:0 1 auto;min-width:0;max-width:55%}
.cf-top .chip .cf-w{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cf-th{flex:none;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.cf-who{flex:0 1 auto;min-width:0;font:700 13.5px/1.3 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-t{flex:none;margin-left:auto;padding-left:var(--s2);font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.cf-x{font-size:var(--t-sm);line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* No side padding: a word found inside another ("convidados.md") reads as one word. */
.cf-x mark{background:var(--d-yel);color:var(--ink);border-radius:2px;padding:0}
@media (prefers-reduced-motion:no-preference){.cf-hit{transition:background var(--dur) var(--ease)}}
@media (max-width:760px){
  /* The bar keeps the header's 12px edges, so the X ends under the badge; the list runs to that same edge. */
  .cfind{padding:var(--s3)}
  .cfind.cf-more:not(.folded)::after{left:var(--s3);right:var(--s3)}
  /* On the phone the list scrolls out into the panel's 12px edge: the bar runs there, beside the hits, never over them,
     and the hits still end under the X. */
  .cf-r{max-height:44vh;margin-right:calc(-1 * var(--s3));padding-right:calc(var(--s3) - var(--sb, 0px))}
  /* T197: on the phone the row keeps the sala, who and when; a thread says itself by the chip's icon. */
  .cf-th{display:none}
}
.msgs{flex:1;overflow:auto;padding:24px 26px 10px;display:flex;flex-direction:column;gap:14px;min-height:0}
.msgs>*{flex-shrink:0}
/* A short conversation sits on the composer, like a messenger, on the phone and on the desktop: the space goes above
   the first line. Only a conversation starts with .day, so the empty state and the loading mascot keep their place.
   Auto margin, not justify-content:flex-end, so a long conversation still scrolls up to its first message. */
.msgs>.day:first-child{margin-top:auto}
.day{align-self:center;font:700 20px/1 var(--hand);color:var(--ink-2);padding:4px 0 6px}
.b{max-width:min(620px,78%);padding:10px 14px;border-radius:16px;border:var(--edge-s);font-size:15px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.b.me{align-self:flex-end;background:var(--paper-2);color:var(--ink);border-bottom-right-radius:4px}
.b.it{background:var(--card);border:var(--edge-s);border-bottom-left-radius:4px}
/* T116: the time sits small in the bubble's corner, after the words, like a messenger. Files go inside the bubble too. */
.btime{display:block;text-align:right;margin:2px -4px -4px 12px;flex:none;font:500 11px/1.3 var(--sans);color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.b.me .btime{color:var(--ink-3)}
/* T341: the two ticks once the member read the line */
.bseen{display:inline-flex;vertical-align:-3px;margin-left:3px;color:var(--moss)}
.bseen .ic{width:15px;height:15px}
.b.me{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-end;column-gap:0}
.b.me>.bt{min-width:0}
.b.me>.btime{margin-left:auto;padding-left:12px}
.b.me>.atts{flex-basis:100%}
.b.has-atts{padding:6px 6px 8px}
.b.has-atts>.bt{display:block;padding:6px 10px 0}
.b.has-atts>.btime{margin-right:6px}
.b .atts{align-self:auto;max-width:100%}
.b.me .atts{justify-content:flex-end}
/* T379: a reply with the files the member sent: its words first, then the files, at the bubble's left like its words. */
.b.it.has-atts>.atts{justify-content:flex-start}
.b.it.has-atts>.bt+.atts{margin-top:var(--s3)}
/* T379 acabamento: the member's bubble with files keeps the padding of every bubble (10px 14px), so its words, the
   picture and the file card start on the same 14px line, and the last one ends on the same right edge. */
.b.it.has-atts{padding:10px 14px}
.b.it.has-atts>.bt{padding:0}
.b.it.has-atts>.btime{margin-right:0}
/* Beside a picture the file card grows (up to its 280px) to the bubble's right edge, where the words and the time end. */
.b.it.has-atts .atts .att-file{flex-grow:1}
/* Inside a bubble a file's corners are --rc, a step under the bubble's 16px, and on the member's white bubble
   the file card sits on paper, so it does not melt into the bubble. */
.b.has-atts .atts .att-img,.b.has-atts .atts .att-file{border-radius:var(--rc)}
.b.it .atts .att-file{background:var(--paper)}
.b.it .atts .att-file .kic{background:var(--card)}
.row-it{display:flex;gap:10px;align-items:flex-end;max-width:100%}
.row-it .b{max-width:min(620px,calc(78% + 40px))}
/* T107: a reply in short messages: one bubble per point, stacked, the face beside the last one. */
.row-it.split .parts{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);min-width:0;max-width:min(620px,calc(78% + 40px))}
.row-it.split .parts .b{max-width:100%}
.row-it.split .parts .b+.b{border-top-left-radius:6px}
/* T187: replies in a row stack like a messenger: 4px between bubbles, the face once beside the last, the corners that
   touch kept small. The wider gap (the log's gap, plus 8px on a change of side) only when the other side speaks. */
.msgs{--mgap:14px}
.row-it.cont{margin-top:calc(var(--s1) - var(--mgap))}
.row-it .fgap{width:34px;flex:none}
.row-it.cont .b.it,.row-it.cont .parts .b:first-child{border-top-left-radius:6px}
/* Room between bubbles: ~4px for the same author again, ~22px when the other side speaks. */
.b.me+.row-it,.row-it+.b.me,.answer+.b.me,.row-it+.atts{margin-top:8px}
/* Answering a reply like a colleague: quiet, under the bubble, shown on the latest reply and on hover */
.answer{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:-6px 0 0 44px;min-height:26px}
.answer .ans{display:inline-flex;align-items:center;gap:5px;font:500 12.5px/1 var(--sans);color:var(--ink-3);background:none;border:1px solid transparent;border-radius:999px;padding:6px 10px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.answer .ans:hover,.answer .ans:focus-visible{color:var(--ink);border-color:var(--edge-ink)}
.answer .ans[aria-pressed=true]{color:var(--terra-ink);background:var(--terra-wash);border-color:transparent}
.answer:not(.last):not(.on) .ans{opacity:0}
.row-it:hover+.answer .ans,.answer:hover .ans,.answer:focus-within .ans{opacity:1}
.answer:not(.last):not(.on) .ans.got{opacity:1}
.answer .ans .ic{width:15px;height:15px}
.answer .ans-t{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3)}
.answer .ans-t .ic{color:var(--honey-ink)}
.answer a.ans-t.kept{color:var(--terra-ink);text-decoration:none}
.answer .ans.keep{display:inline-flex;align-items:center;gap:5px;color:var(--terra-ink);border:1px dashed color-mix(in srgb,var(--terra-ink) 40%,transparent)}
.answer .ans.keep:hover,.answer .ans.keep:focus-visible{background:var(--terra-wash);border-style:solid}
.kept-f{display:grid;gap:6px;width:100%;padding:12px;border-radius:14px;background:var(--card);border:var(--edge-s)}
.kept-f label{font-size:13px;font-weight:600;color:var(--ink)}
.kept-f textarea{resize:vertical;font:14px/1.45 var(--sans);min-height:72px}
.kept-f .keep-hint{margin:0;font-size:12.5px;line-height:1.4;color:var(--ink-3);text-wrap:pretty}
.kept-f .acts{display:flex;flex-wrap:wrap;gap:6px}
.answer .keep-f{scroll-margin:24px 0;flex-basis:100%;display:grid;gap:6px;max-width:520px;margin-top:4px;padding:12px;border-radius:14px;background:var(--card);border:var(--edge-s)}
.answer .keep-f label{font-size:13px;font-weight:600;color:var(--ink)}
.answer .keep-f textarea{resize:vertical;font:14px/1.45 var(--sans);min-height:72px}
.answer .keep-f .keep-hint{margin:0;font-size:12.5px;line-height:1.4;color:var(--ink-3);text-wrap:pretty}
.answer .keep-f .acts{display:flex;flex-wrap:wrap;gap:6px}
.answer .miss-f{flex-basis:100%;display:flex;gap:8px;max-width:520px}
.answer .miss-f .input{flex:1;min-width:0;font-size:14px;padding:8px 12px}
.answer .formerr{flex-basis:100%}
/* T130: a message's menu (right click, long press): the emoji bar on top, Responder, Encaminhar and Copiar below. */
.b[data-mid]{transition:box-shadow var(--dur) var(--ease)}
.b.picked{box-shadow:0 0 0 2px var(--terra)}
.b[data-mid]:focus-visible{outline:3px solid var(--peng);outline-offset:2px}
.msgmenu{position:fixed;z-index:60;display:grid;gap:6px;min-width:220px;max-width:calc(100vw - 16px)}
.mm-emo{display:flex;gap:2px;padding:4px;background:var(--card);border:var(--edge-s);border-radius:99px;box-shadow:var(--hard-s)}
.mm-emo button{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:99px;background:none;font-size:21px;line-height:1;cursor:pointer;transition:background var(--dur),transform var(--dur) var(--spring)}
.mm-emo button:hover,.mm-emo button:focus-visible{background:var(--paper-2)}
.mm-emo button[aria-pressed=true]{background:var(--terra-wash)}
.mm-emo button:disabled{opacity:.45;cursor:default}
.mm-list{display:grid;padding:6px;background:var(--card);border:var(--edge-s);border-radius:var(--r2);box-shadow:var(--hard-s)}
.mm-list button{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border:0;border-radius:var(--r1);background:none;color:var(--ink);font:500 var(--t-sm)/1 var(--sans);text-align:left;cursor:pointer}
.mm-list button .ic{color:var(--ink-2)}
.mm-list button:hover,.mm-list button:focus-visible{background:var(--paper-2)}
.msgmenu button:focus-visible{outline:3px solid var(--peng);outline-offset:-2px}
@media (prefers-reduced-motion:no-preference){.msgmenu{animation:mmIn var(--dur) var(--ease)}.mm-emo button:hover{transform:scale(1.15)}}
@keyframes mmIn{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}
/* The emoji put on a line: chips right under it. */
.reacts{display:flex;flex-wrap:wrap;gap:6px;margin:calc(8px - var(--mgap,14px)) 0 0 44px}
.reacts.me{justify-content:flex-end;margin-left:0}
.rchip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 9px;border:var(--edge-s);border-radius:99px;background:var(--card);color:var(--ink-2);font:600 var(--t-xs)/1 var(--sans);font-variant-numeric:tabular-nums;cursor:pointer;transition:background var(--dur),border-color var(--dur)}
.rchip span{font-size:15px}
.rchip:hover{border-color:var(--line-2)}
.rchip[aria-pressed=true]{background:var(--terra-wash);border-color:var(--terra);color:var(--terra-ink)}
.rchip:disabled{cursor:default}
.reacts+.answer{margin-top:calc(8px - var(--mgap,14px))}
.reacts+.b.me,.reacts+.row-it{margin-top:8px}
/* The quote: inside the bubble of the line that answers, and over the composer while writing it. No colored edge. */
.bq{display:flex;gap:6px;align-items:flex-start;flex-basis:100%;min-width:0;margin:0 0 6px;padding:7px 10px;border-radius:12px;background:var(--card);color:var(--ink-2);font-size:var(--t-sm);line-height:1.4;white-space:normal}
.b.it .bq{background:var(--paper-2)}
.bq .ic{color:var(--ink-3);flex:none;margin-top:1px}
.bq-t{display:grid;min-width:0}
.bq-t b{font-weight:600;color:var(--terra-ink);font-size:var(--t-xs)}
.bq-t>span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.b.has-q{min-width:min(240px,78%)}
.bq.jump{width:100%;border:0;font:inherit;text-align:left;cursor:pointer;transition:background var(--dur)}
.bq.jump:hover{background:var(--paper-2)}
.b.it .bq.jump:hover,.rmsg.mine .rb .bq.jump:hover{background:var(--line)}
.bq.jump:focus-visible{outline:3px solid var(--peng);outline-offset:1px}
/* T130 in a roda: the quote sits on top of the reply in its bubble; the line the menu is open on, and the one a quote took you to. */
.rb .bq{margin:2px 0 6px}
.rmsg:not(.mine) .rb .bq{background:var(--paper-2)}
.rb.has-q{min-width:min(240px,100%)}
.rb[data-rid]{transition:box-shadow var(--dur) var(--ease)}
.rb.picked{box-shadow:0 0 0 2px var(--terra)}
.rb[data-rid]:focus-visible{outline:3px solid var(--peng);outline-offset:2px}
.b.flash,.rb.flash{animation:qFlash 1.5s var(--ease)}
@keyframes qFlash{0%,40%{box-shadow:0 0 0 3px var(--terra)}100%{box-shadow:0 0 0 0 transparent}}
.reply-q:not([hidden]){display:flex;align-items:center;gap:10px;flex-basis:100%;order:-1;margin:0 0 2px 6px;padding:8px 6px 8px 10px;border-radius:12px;background:var(--card)}
.reply-q .rq-ic{color:var(--terra-ink);display:grid;place-items:center}
.reply-q .rq-t{display:grid;flex:1;min-width:0;font-size:var(--t-sm);line-height:1.35;color:var(--ink-2)}
.reply-q .rq-t b{font-size:var(--t-xs);font-weight:600;color:var(--terra-ink)}
.reply-q .rq-t>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* Encaminhar: the conversations to send the line to. */
.fwd-q .bq{margin:0}
.fwd-list{display:grid;gap:6px;max-height:min(360px,50dvh);overflow:auto}
.fwd-to{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;border:var(--edge-s);border-radius:var(--r2);background:var(--card);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.fwd-to:hover,.fwd-to:focus-visible{background:var(--bear-w)}
.fwd-to>span:nth-child(2){flex:1;min-width:0;display:grid}
.fwd-to b{font-weight:600}.fwd-to small{color:var(--ink-3);font-size:12.5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fwd-to .ic{color:var(--ink-3)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;display:inline-flex;align-items:center;gap:8px;margin:0;padding:10px 16px;border-radius:99px;background:var(--ink);color:var(--on-ink);font:700 var(--t-sm)/1 var(--sans);box-shadow:var(--hard-fox)}
/* T280: the new-version pill. At the top, so it never covers the composer; it stays until Atualizar or the X. */
.toast.fresh{gap:10px;padding:6px 6px 6px 16px;max-width:calc(100vw - 24px);white-space:nowrap}   /* T283: over the composer, centred on the pane (placeFresh) */
.toast.fresh>span{overflow:hidden;text-overflow:ellipsis}
body.fresh-on .msgs{padding-bottom:calc(6px + var(--fresh-room,54px))}
@media (max-width:1180px){body.fresh-on[data-view] .rail{padding-bottom:calc(24px + var(--fresh-room,54px))}}   /* over body[data-view="chat"] .rail on the phone */
.toast.fresh .btn.icon.soft{color:var(--on-ink);width:30px;padding:0}
@media (max-width:760px){.toast.fresh .btn.icon.soft{width:38px}}
@media (hover:none){.msgs .b[data-mid]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}
@media (hover:none){.answer:not(.last):not(.on) .ans{display:none}.answer:not(.last):not(.on):not(:has(.ans-t)):not(:has(.trace-l)){display:none}}
.mini-face{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none}
.mini-face .m{width:30px;height:30px}
.notice{display:flex;gap:14px;align-items:flex-start;background:var(--honey-wash);border-radius:var(--r2);padding:14px 16px;border:var(--edge-s);max-width:620px}
.notice>.m{width:48px;height:48px;flex:none}
.notice b{font:800 16px/1.3 var(--serif);display:block}
.notice p{font-size:14px;color:var(--ink-2);margin-top:2px}
.notice .acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.notice p.allowed{margin-top:10px;color:var(--moss);font-weight:600}
.composer{margin:8px 22px 8px;display:flex;align-items:center;gap:10px;background:var(--paper);border:var(--edge);border-radius:var(--r2);box-shadow:var(--hard-s);padding:7px 7px 7px 6px;transition:border-color var(--dur),box-shadow var(--dur)}
.composer:focus-within{box-shadow:4px 4px 0 var(--fox)}
.composer .input{border:0;background:transparent;box-shadow:none;height:40px}
.composer.held{background:var(--card);border-style:dashed;opacity:.72}
.composer.held .input::placeholder{color:var(--ink-2)}
.composer{flex-wrap:wrap;position:relative}
/* T112: files on the way, above the line you type in; the clip on its left; a drop target over the whole composer. */
.composer .clip{width:38px;height:38px;border-radius:12px;border:0;background:transparent;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;flex:none;transition:background var(--dur),color var(--dur),transform .2s var(--spring)}
.composer .clip:hover{background:var(--card);color:var(--ink);transform:rotate(-12deg)}
.composer .clip:disabled{opacity:.45;cursor:default;transform:none}
.composer .msgwrap{flex:1;min-width:0;display:flex}
.composer .msgwrap .input{flex:1;min-width:0}
.att-tray{order:-1;flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;padding:4px 4px 8px 6px;margin-bottom:2px;border-bottom:1px dashed var(--line)}
.att-tray[hidden]{display:none}
.att-it{position:relative;display:flex;align-items:center;gap:8px;max-width:220px;height:56px;padding:4px 30px 4px 4px;border-radius:14px;background:var(--card);border:var(--edge-s)}
.att-it .th{width:46px;height:46px;border-radius:10px;object-fit:cover;flex:none;background:var(--paper)}
.att-it .kic{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--paper);color:var(--ink-2)}
.att-it .nm{min-width:0;display:flex;flex-direction:column;font-size:13px;line-height:1.3}
.att-it .nm b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att-it .nm small{color:var(--ink-2);font-size:12px}
.att-it.up .th,.att-it.up .kic{opacity:.55}
.att-it.err{background:var(--honey-wash);border-color:var(--honey)}
.att-it .rm{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:8px;border:0;background:transparent;color:var(--ink-2);display:grid;place-items:center;cursor:pointer}
.att-it .rm:hover{background:var(--paper);color:var(--ink)}
.att-it .rm .ic{width:15px;height:15px}
.composer.dropping{border-color:var(--terra);border-style:dashed;background:var(--terra-wash)}
.composer .drop-n{position:absolute;inset:0;display:none;place-items:center;border-radius:18px;font-weight:600;color:var(--terra-ink);background:color-mix(in srgb,var(--terra-wash) 88%,transparent);pointer-events:none}
.composer.dropping .drop-n{display:grid}
.att-err{margin:-2px 24px 4px;font-size:13px;color:var(--ink);background:var(--honey-wash);border-radius:10px;padding:6px 10px}
.att-err:empty{display:none}
/* In the conversation: the files above the person's words, on the right like the bubble. */
.atts{align-self:flex-end;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start;gap:8px;max-width:min(620px,78%)}
.atts .att-img{display:block;border-radius:16px;overflow:hidden;border:var(--edge-s);background:var(--card);max-width:260px}
.atts .att-img img{display:block;max-width:260px;max-height:220px;width:auto;height:auto;object-fit:cover}
.atts .att-img{cursor:zoom-in}
/* T196: the picture opened whole inside the app. The dialog is the whole screen; a click off the picture closes it.
   The backdrop is dark on every theme, so the caption is a fixed light tone (--on-ink turns dark on Cacau, Carvão, Oliva). */
.img-dlg{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden}
.img-dlg::backdrop{background:rgba(29,27,24,.86)}
.img-dlg figure{margin:0;height:100%;box-sizing:border-box;padding:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;cursor:zoom-out}
.img-dlg img{display:block;max-width:100%;max-height:calc(100dvh - 184px);width:auto;height:auto;object-fit:contain;border-radius:16px;border:var(--edge);background:var(--card);box-shadow:var(--hard);cursor:default}
.img-dlg figcaption{max-width:100%;color:#F6F0E4;font-size:var(--t-sm);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.img-dlg .img-x{position:absolute;top:20px;right:20px;z-index:1}
.atts .att-file{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:16px;background:var(--card);border:var(--edge-s);color:var(--ink);text-decoration:none;max-width:280px}
.atts .att-file:hover{border-color:var(--ink-2)}
.atts .att-file .kic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--paper);color:var(--ink-2);flex:none}
.atts .att-file span:last-child{min-width:0;display:flex;flex-direction:column;font-size:13px;line-height:1.35}
.atts .att-file b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atts .att-file small{color:var(--ink-2)}
.atts .att-file.att-pdf{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;width:280px;max-width:280px}
/* T373: the PDF's first page above its card, the top of the page as a window; the card's row below as any file's. */
.atts .att-pdf .att-pg{display:block;height:150px;overflow:hidden;background:#fff;border-bottom:var(--edge-s)}
.atts .att-pdf .att-pg img{display:block;width:100%;height:auto}
.atts .att-file.att-pdf>.att-fn{display:flex;flex-direction:row;align-items:center;gap:10px;padding:8px 14px 8px 8px;min-width:0;font-size:inherit}
.atts .att-file.att-pdf>.att-fn>span:last-child{min-width:0;display:flex;flex-direction:column;font-size:13px;line-height:1.35}
.atts .att-pdf{cursor:zoom-in}
/* T373: a PDF read in the app, its pages one under the other on the lightbox, name and Baixar fixed on top. */
.pdf-dlg{overflow:auto;overscroll-behavior:contain}
.pdf-dlg .pdf-top{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);background:rgba(29,27,24,.94);color:#F6F0E4}
.pdf-dlg .pdf-top .btn.sm{min-height:38px;padding-block:0}
.pdf-dlg .pdf-top b{flex:1;min-width:0;font-size:var(--t-sm);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdf-dlg .pdf-pages{display:flex;flex-direction:column;align-items:center;gap:var(--s4);padding:var(--s6) var(--s6) var(--s12);cursor:zoom-out}
.pdf-dlg .pdf-pages img{display:block;width:min(860px,100%);height:auto;max-height:none;object-fit:fill;aspect-ratio:auto 210/297;border-radius:8px;background:#fff;box-shadow:var(--hard);cursor:default}
.pdf-dlg .pdf-more{margin:0;color:#F6F0E4;font-size:var(--t-sm);max-width:var(--measure);text-align:center}
.send{width:42px;height:42px;border-radius:var(--rc);background:var(--fill);color:var(--on-fill);display:grid;place-items:center;border:var(--edge);cursor:pointer;flex:none;transition:transform .2s var(--spring),background var(--dur)}
.send:hover{background:var(--fill-hi);color:var(--on-fill-hi);transform:rotate(-8deg) scale(1.05)}
/* T341: Parar is a quiet link beside the thinking bubble, never in the composer; the padding is the touch target. */
.stop-l{font:600 13px/1 var(--sans);color:var(--ink-2);background:none;border:0;padding:16px 8px;margin:0 0 0 -6px;cursor:pointer;flex:none;border-radius:8px;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.stop-l:hover{color:var(--terra-ink);text-decoration-color:currentColor}
.stop-l:focus-visible{outline:2px solid var(--terra-ink);outline-offset:-4px}
.for-n{font-size:12.5px;font-weight:600;color:var(--ink-2);margin-right:8px}
/* T380: icon 10px from the text (18px padding left it at 4). */
.stop-n{position:relative;align-self:center;max-width:46ch;padding-left:24px;font-size:12px;line-height:1.45;color:var(--ink-3);font-weight:400;text-wrap:pretty}
.stop-n .ic{position:absolute;left:0;top:1px;width:14px;height:14px;color:var(--pencil)}
.stopping{display:inline-block;padding:2px 4px;font-size:13.5px;color:var(--ink-2)}
.send:disabled{background:var(--line-2);transform:none;cursor:default}
/* T306: the footer line can run two lines; it keeps 12px from the composer, starts and ends on the composer's edges, and
   sits 16px off the bottom (the DESIGN.md scale). */
.hint-under{margin:4px 22px 16px;font-size:12px;color:var(--ink-3)}
.empty{margin:auto;max-width:400px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px}
.empty .m.big{width:120px;height:120px;margin-bottom:6px}
.empty h3{font-size:28px}
.empty p{color:var(--ink-2);font-size:14.5px}
.empty .born .lnk{display:inline-block;padding:12px 4px;margin:-12px 0}
/* T381: what was said and how the member came are two thoughts; 12px between them, not the 8px of the title above. */
.empty .born{margin-top:var(--s1)}
.empty .pre-n{margin-top:12px;text-align:left;width:100%}
.empty:has(.pre-n) .m.big{width:92px;height:92px;margin-bottom:2px}
.empty .pre-n .notice p{font-size:var(--t-sm)}
.empty.center{margin-top:14vh}
/* An empty place: who would be there, a line, one way in. */
.empty.place .btn{margin-top:8px}
.home .empty.place{margin:8px auto 0;padding:28px 24px 32px;background:var(--card);border:1.5px dashed var(--edge-ink);border-radius:var(--r3);max-width:520px}
.cards>.empty.place{grid-column:1/-1}
/* T105: inside a page the empty place is one more block of the column: left edge, full width, never a centred 400px island. */
.page .empty.place{margin:0;max-width:var(--col);width:100%;text-align:left;align-items:flex-start;padding:20px 24px;background:var(--card);border:1.5px dashed var(--edge-ink);border-radius:var(--r2)}
.page .cards>.empty.place{max-width:none}
.page .empty.place .m.big{width:84px;height:84px;margin-bottom:2px}
.loadfail{max-width:620px}
.btn.sso{margin-top:10px;height:44px;padding:0 22px;font-size:14.5px;text-decoration:none}
.empty.login .aside{margin-top:6px;font-size:var(--t-sm)}

/* right: the badge */
.rail{background:var(--paper);border-left:var(--edge);padding:22px 20px;flex-direction:column;gap:16px;overflow:auto;min-height:0}
/* T281: the X that closes the crachá, at every width. */
.rail-x{display:inline-flex;align-self:flex-start;flex:none}
.idcard{border-radius:var(--r3);border:var(--edge);background:var(--tint,var(--card));padding:16px;position:relative;overflow:hidden;box-shadow:var(--hard-s);flex:none}
.idcard .tag{display:flex;justify-content:space-between;gap:8px}
.idcard .tag .mono{color:var(--ink-2)}
.idcard .pic{background:var(--card);border:var(--edge-s);border-radius:14px;height:132px;margin-top:12px;display:grid;place-items:center;position:relative;overflow:hidden}
.idcard .pic::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 14px,var(--stripe) 14px 15px)}
.idcard .pic .m{width:112px;height:112px;position:relative;transform:translateY(8px)}
.idcard h2{font-size:31px;margin-top:12px}
.idcard p{font-size:13.5px;color:var(--ink-2);margin-top:4px}
.kv{background:var(--card);border-radius:16px;border:var(--edge-s);padding:2px 14px;flex:none}
.kv>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;font-size:13.5px;border-bottom:1px dashed var(--line);text-align:right}
.kv>div:last-child{border:0}
.kv>div.col{display:block;text-align:left}
.kv span{color:var(--ink-3);text-align:left;flex:none}
.kv>div.lim{display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:8px;justify-items:start;text-align:left}
.lim .lh{display:flex;justify-content:space-between;align-items:center;gap:10px;justify-self:stretch;text-align:right}
.lim .meter,.lim .capform{justify-self:stretch}
.lim .help{margin:0}
/* T355: the error line under a switch takes no room until it has something to say (empty, it left a gap under the switch). */
.lim>.formerr{margin:0}.lim>.formerr:empty{display:none}
/* T356: O que fez in labelled lines (Agora, Última coisa que fez with Ver no Diário beside it), then Pausar <nome> with
   what pausing does under it and the in-place confirmation, past a dashed line: now, past and the control never mix. */
.act-row{display:grid;gap:4px;justify-self:stretch;min-width:0}
.act .act-k{font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.act-st{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);min-width:0}
.act .act-st>span{color:var(--ink);text-wrap:pretty}
.act-st>.dot{flex:none}
.act-lastl{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.act-lastl>.btn{flex:none;white-space:nowrap}
.act .note{margin:0;justify-self:stretch}
.act .note .lnk{white-space:nowrap}
.act-today{margin:0;flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--ink);text-wrap:pretty;overflow-wrap:anywhere}
.act-pause{display:grid;gap:6px;justify-items:start;justify-self:stretch;padding-top:10px;border-top:1px dashed var(--line)}
.act-hint{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.act-pause>.acct-confirm{justify-self:stretch}
.act-pause>.acct-confirm p{margin:0;font-size:13px;color:var(--ink);text-wrap:pretty}
.act-pause>.acct-confirm .actions{display:flex;flex-wrap:wrap;gap:8px}
.act-pause>.formerr{margin:0}.act-pause>.formerr:empty{display:none}
/* T141: in the Diário a run, and a call made again and again, open in place: the same .ev line, its detail under it. */
.ev.evx{display:block;padding:0}
.evx>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:10px 12px;min-height:44px;cursor:pointer;border-radius:16px}
.evx>summary::-webkit-details-marker{display:none}
.evx>summary:focus-visible{outline:3px solid var(--peng);outline-offset:2px}
.evx>summary>.ic{flex:none;width:16px;height:16px;color:var(--ink-3);transition:transform .2s var(--ease)}
.evx[open]>summary>.ic{transform:rotate(90deg)}
.evx>summary .chip{flex:none}
.evx-b{display:grid;gap:8px;padding:0 12px 12px 58px;min-width:0}
.evx-b p{margin:0}
.evx-b>:is(.run-tk,.run-err){max-width:var(--measure)}
.evx-b>.trace{max-width:var(--read)}  /* T359: open on a full-width Diário, the steps stay a reading block */
.run-tk{font:11.5px/1.45 var(--mono);color:var(--ink-2);overflow-wrap:anywhere}
.run-err{font-size:12.5px;color:var(--ink-2);background:var(--honey-wash);border-radius:10px;padding:8px 10px;overflow-wrap:anywhere}
.run-err .mono{margin-right:6px}
.trace{list-style:none;padding:0;margin:0;display:grid;gap:4px;font:11.5px/1.45 var(--mono);color:var(--ink-2);min-width:0}
.trace li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;overflow-wrap:anywhere}
.trace li span{color:var(--ink-3);min-width:44px}
.near-n{align-self:stretch;margin:4px 0 0}
.talkers{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}
.talkers li{display:grid;gap:1px}.talkers b{font-weight:600;font-size:13.5px}.talkers small{font-size:12px;color:var(--ink-3)}
.keptasks{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:12px}
.keptasks li{display:grid;gap:4px;justify-items:start}
.keptasks q{font-family:var(--serif);font-size:15px;line-height:1.35;color:var(--ink);quotes:'“' '”';text-wrap:pretty}
.keptasks small{font-size:12px;color:var(--ink-3)}
.keptasks small.used{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2)}.keptasks small.used .ic{color:var(--honey-ink);width:14px;height:14px}
.kept-acts{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-left:-10px}
.kept-acts .quiet{color:var(--ink-3)}.kept-acts .quiet:hover,.kept-acts .quiet:focus-visible{color:var(--terra-ink)}
.kept-acts .kept-q{font-size:12.5px;color:var(--ink-2);padding:0 6px 0 10px}
.kept-acts .formerr{flex-basis:100%;padding-left:10px}
.keptasks+.more{display:inline-block;margin-top:10px;background:none;border:0;padding:4px 0;font:600 13px/1.2 var(--sans);cursor:pointer}
.talk-none{margin-top:6px;font-size:13px;color:var(--ink-3)}
.by{align-self:flex-end;font-size:11.5px;color:var(--ink-3);margin:0 8px -9px}
.labels{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.labels i{font:700 12.5px/1 var(--sans);font-style:normal;padding:6px 10px;border-radius:99px;border:1.5px solid var(--edge-ink);color:var(--ink);background:var(--l);transition:transform .2s var(--spring)}
details.tech{background:var(--card);border-radius:var(--r2);border:var(--edge-s);padding:12px 14px;font-size:13px;flex:none}
details.tech summary{list-style:none;display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink-2);cursor:pointer}
details.tech summary::-webkit-details-marker{display:none}
details.tech summary .ic{width:16px;height:16px;transition:transform .2s var(--ease)}
details.tech[open] summary .ic{transform:rotate(90deg)}
details.tech ul{list-style:none;padding:12px 0 0;display:grid;gap:8px;color:var(--ink-2);font:12px/1.45 var(--mono)}
details.tech li{display:flex;justify-content:space-between;gap:10px;text-align:right}
details.tech li span{color:var(--ink-3);text-align:left}
details.tech li.col{display:grid;gap:6px;text-align:left;justify-items:start}
.meter{display:block;width:100%;height:10px;border-radius:9px;background:var(--paper-2);border:1.5px solid var(--edge-ink);overflow:hidden}
.meter i{display:block;height:100%;background:var(--honey);border-radius:9px}
.capform{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.capform .input{width:110px;height:32px}
.capform .help{flex-basis:100%;margin:0}
/* F18: the internet switch in the crachá. A pill track with a knob; terracotta when on, the label says the state in words. */
.netsw{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;background:none;font:600 13.5px/1.2 var(--sans);color:var(--ink);cursor:pointer;justify-self:start}
/* v7 switch: ink edged track, rabbit green when on, the knob springs across. */
.netsw>i{position:relative;flex:none;width:44px;height:26px;border-radius:99px;border:var(--edge);background:var(--paper-2);transition:background .2s var(--ease)}
.netsw>i::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--card);border:2px solid var(--edge-ink);box-sizing:border-box;transition:transform .35s var(--spring)}
.netsw[aria-checked="true"]>i{background:var(--rabbit)}
.netsw[aria-checked="true"]>i::after{transform:translateX(18px)}
.netsw:focus-visible{outline:3px solid var(--peng);outline-offset:3px;border-radius:8px}
/* T392: saving, the switch waits with busy()'s dots alone, at the same 10px from the label as the track; no pointer on a switch that cannot be pressed yet. */
.netsw .bdots{margin-left:0}.netsw:disabled{cursor:default}
.netbox .netform{margin-top:4px}
@media (prefers-reduced-motion:reduce){.netsw>i,.netsw>i::after{transition:none}}
.netform{display:grid;gap:8px;width:100%}
.netform fieldset{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.netform .opt{display:flex;align-items:center;gap:6px;font:13px/1.3 var(--sans);color:var(--ink);cursor:pointer}
.netform .opt input{accent-color:var(--terra);margin:0}
/* T361: the model's own host (an account address can be one long name): breaks anywhere, never past the panel. */
.netform #netmodel{overflow-wrap:anywhere;margin:0}
.netform textarea{resize:vertical;font:13px/1.5 var(--mono);min-height:84px}
.netform .help{margin:4px 0 0}
.netform .acts{display:flex;gap:8px;align-items:center}
#net>.help{margin:0}
#sitesbox{margin-top:10px}

/* pages: rodas, cofre, diario, pessoas, forms */
.pane-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pane-h h1{font-size:clamp(30px,3.4vw,44px);margin-top:6px}
/* T367: the header's action (Nova sala, Novo quadro, Lista | Colunas) sits on the title's line, not on the middle of
   crumb + kicker + title (it rode 29px above the title's axis at 1440). Its box is the title's line box, bottom to bottom. */
@media (min-width:641px){.pane-h>.hacts{align-self:flex-end;min-height:calc(clamp(30px,3.4vw,44px) * 1.02);align-items:center}}
.page .back{display:none}
/* T36: the way back, one line above the title, naming where it leads ("‹ Conexões"); the same on desktop and phone */
.crumb{display:flex;align-items:center;gap:5px;width:fit-content;max-width:calc(100% + 2px);min-height:32px;margin:-6px 0 4px -2px;padding:0 6px 0 2px;border-radius:8px;color:var(--ink-2);font-weight:600;font-size:14px;line-height:1.2;text-decoration:none}
.crumb .crumb-a{font-size:20px;line-height:1;margin-top:-2px;color:var(--ink)}
.crumb .crumb-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumb:hover{color:var(--terra-ink)}.crumb:hover .crumb-t{text-decoration:underline}
.crumb:focus-visible{outline:3px solid var(--peng);outline-offset:2px}
.room-h .crumb{min-height:24px;margin:0 0 2px -2px;font-size:13px}
.plat-intro .crumb{margin-bottom:8px}
/* T123: the supporting text takes the whole column, the same edge as the cards and the header's action. */
.lede{color:var(--ink-2);margin-top:12px;max-width:var(--col)}
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:18px;max-width:var(--col)}
.roda.big{background:var(--card);border:var(--edge-s);border-radius:var(--r2);padding:14px 16px}
.roda.big .face{width:38px;height:38px}
.roda.big .face .m{width:32px;height:32px}
.roda.big .rt b{font:800 18px/1.2 var(--serif)}
/* T414: with its people the line is longer; on the phone "Assistente e Mariana podem se falar" left "falar" alone */
.roda.big .rt small{font-size:13px;text-wrap:pretty}
.sub{font-size:26px;margin-top:36px;letter-spacing:-.03em}
.keyrow,.person{display:flex;align-items:center;gap:12px;background:var(--card);border:var(--edge-s);border-radius:16px;padding:12px 14px}
.kic,.initial{width:38px;height:38px;border-radius:12px;background:var(--honey-wash);color:var(--ink);border:1.5px solid var(--edge-ink);display:grid;place-items:center;flex:none;font:800 16px/1 var(--serif)}
.initial{background:var(--peri-wash);color:var(--ink);border-radius:50%}
.mono-n{font:600 13px/1.2 var(--mono)}
.keyrow small,.person small{display:block;color:var(--ink-3);font-size:12.5px}
.keyrow small{margin-left:auto}
.person>div{flex:1;min-width:0;overflow-wrap:anywhere}
/* The role select is a control in the row, sized like the buttons, not like a form field (it read bigger than the card). */
.person select{width:140px;height:38px;font-size:13.5px;background-position:calc(100% - 17px) 16px,calc(100% - 12px) 16px}
.person small.via{margin-top:2px}
/* T364: the email never breaks mid-word: one line, ellipsis at the edge, the whole address in the tooltip. */
.person small.em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
/* T314: the new-link button of who has not come in, on its own line under the name, never against the role. */
.person:has(.relink-row){flex-wrap:wrap}
.person .relink-row{flex-basis:100%;padding-left:50px;margin-top:-2px}
/* Removing a person (T9): a quiet icon in the row, then a dialog that names them and says what happens. */
.person .rm{color:var(--ink-3);flex:none}.person .rm:hover{color:var(--danger)}
.btn.danger{background:var(--danger);color:var(--on-ink);border-color:var(--edge-ink)}.btn.danger:hover{background:var(--danger)}
.dlg{margin:auto;width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:var(--edge);border-radius:var(--r3);background:var(--card);color:var(--ink);padding:22px 22px 18px;box-shadow:8px 8px 0 var(--edge-ink)}
.dlg::backdrop{background:var(--scrim)}
.dlg h2{font:800 24px/1.15 var(--serif);letter-spacing:-.03em;margin:0 0 14px}
.dlg p{margin:0 0 10px;color:var(--ink-2);line-height:1.5}
.dlg .dlg-warn{color:var(--danger)}
.dlg-who{display:flex;align-items:center;gap:12px;padding:10px 12px;border:var(--edge-s);border-radius:14px;margin-bottom:14px}
.dlg-who>div{min-width:0}.dlg-who b{display:block;overflow:hidden;text-overflow:ellipsis}.dlg-who small{display:block;color:var(--ink-3);font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
.dlg .formerr:empty{display:none}
.dlg-acts{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;flex-wrap:wrap}
/* T412: deleting a member. What goes with it is a short list, then the name typed to wake the red button. */
.adel .dlg-who .face{margin-right:0;width:36px;height:36px;flex:none}.adel .dlg-who .face .m{width:30px;height:30px}
.adel .adel-k{margin:0 0 var(--s2);font-weight:700;color:var(--ink)}
.adel{width:min(520px,calc(100vw - 32px))}
/* T412 review: items a --s2 apart (at --s1 a two-line item ran into the next), and the Diário note a --s3 below the list, not one more item */
.adel-list{margin:0 0 var(--s3);padding:0 0 0 var(--s5);display:grid;gap:var(--s2);color:var(--ink-2);font-size:14px;line-height:1.45;text-wrap:pretty}
.adel-list .adel-wait{list-style:none;margin-left:calc(-1 * var(--s5));color:var(--ink-3)}
.adel .dlg-note{margin:0 0 var(--s5);font-size:13px;color:var(--ink-3)}
/* T412 review: the delete box sits --s8 below Detalhes técnicos (the panel's 14px gap plus this), on the scale, apart from the settings above it */
.delbox{margin-top:calc(var(--s8) - 14px)}
@media (max-width:620px){.adel .dlg-acts .sp{display:none}.adel .dlg-acts [data-act="pause"]{order:3;flex-basis:100%;justify-content:center}}
.adel-f{display:grid;gap:6px;margin:0}.adel-f label{margin:0}
.adel .formerr:not(:empty){margin-top:var(--s2)}
.entry{border:0;padding:0;margin-top:22px;max-width:var(--col)}
.entry legend{padding:0}
.choices.two{grid-template-columns:repeat(2,1fr)}
/* T359: the Diário takes the column. The filters are controls grouped on the left at a control's width (260px), not
   stretched toward the list; on the phone they share the row half and half. Each line keeps
   --measure and its state goes to the right edge, so a wide row is a list, not a stretched sentence. */
.filters{display:grid;grid-template-columns:repeat(2,minmax(0,260px));gap:14px;margin-top:18px;max-width:var(--col)}
.filters .input{width:100%;min-width:0}
/* The Diário reads top to bottom in time: one list across the column, not cards side by side. */
.audit{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:16px;max-width:var(--col)}
.ev{display:flex;align-items:center;gap:12px;background:var(--card);border:var(--edge-s);border-radius:16px;padding:12px 14px}
.ev .what{flex:1;min-width:0;max-width:var(--measure);font-size:14px}
.ev .what+*{margin-left:auto}
.ev .what small{display:block;color:var(--ink-3);font-size:12px;margin-top:2px;text-wrap:pretty}
.ev b{font-weight:600}
.more{margin-top:8px;justify-self:start}
/* T359: the Mais page is .page.more; the rule above (the Diário's more button) pushed the whole page 8px down. */
.page.more{margin-top:0;justify-self:stretch}
.invite{display:grid;grid-template-columns:1fr 150px auto;gap:10px;align-items:end;margin-top:20px;max-width:var(--col)}
.ssodoms{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-top:14px}
.lbl,.field label{display:block;font:700 13.5px/1.3 var(--sans);color:var(--ink);margin-bottom:6px}
.linkbox{font:12px/1.4 var(--mono);word-break:break-all;background:var(--card);border:1.5px dashed var(--edge-ink);padding:12px;border-radius:12px;margin-top:10px;max-width:var(--read)}
.formerr{color:var(--danger);font-size:var(--t-sm);margin-top:10px;min-height:1em}
/* T424: the empty crachá is said under its own field, 6px under the input like the help; the field's border says it too. */
.ferr{margin-top:6px;min-height:0}.ferr:empty{display:none}.input[aria-invalid=true]{border-color:var(--danger)}
.form{display:grid;gap:18px;margin-top:22px;max-width:var(--read)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.help{font-size:12.5px;color:var(--ink-3);margin-top:6px}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.choice{position:relative;display:flex;flex-direction:column;gap:4px;border:var(--edge-s);border-radius:var(--r2);padding:12px 14px;background:var(--card);cursor:pointer;transition:border-color var(--dur),background var(--dur),transform .2s var(--spring)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice .ct{display:flex;align-items:center;gap:8px;font:800 16px/1.2 var(--serif)}
.choice small{font-size:12.5px;color:var(--ink-3)}
.choice.on small{color:var(--ink-2)}
.choice.on{border:var(--edge);background:var(--d-yel);box-shadow:var(--hard-s)}
.choice.dis{opacity:.45;cursor:not-allowed}
.choice[hidden]{display:none}
.choice:has(input:focus-visible){outline:3px solid var(--peng);outline-offset:3px}
.form details.tech{padding:14px 16px}
.tech-body{display:grid;gap:14px;margin-top:14px}
.form .note{margin-top:0}
.actions{display:flex;gap:10px}

/* loading */
.loading{display:flex;flex-direction:column;align-items:center;padding:12vh 24px 24px;gap:10px;overflow:hidden}
.boot-m .m{width:72px;height:72px}
.loading p{font:800 20px/1 var(--serif);color:var(--ink-2)}
.sk{display:block;border-radius:16px;background:linear-gradient(100deg,var(--paper-2) 30%,var(--card) 50%,var(--paper-2) 70%);background-size:300% 100%}
.sk-mural{width:100%;max-width:var(--col)}
.mini-sk{height:206px;border-radius:var(--r3)}
.row-sk{height:56px;margin:2px 0;border-radius:15px}
.sk-chat{display:grid;gap:14px;padding:6px 0}
.sk-chat .sk{height:46px;border-radius:20px}
.sk-person{height:64px;border-radius:18px}
.sk-chat .w60{width:60%}.sk-chat .w40{width:40%;justify-self:end}.sk-chat .w70{width:70%}
.typing{display:inline-flex;gap:5px;align-items:center;height:22px;padding:0 4px;vertical-align:middle}
.btn.busy{cursor:progress}.btn.busy:disabled{opacity:.8}
.bdots{display:inline-flex;gap:3px;margin-left:2px}.bdots i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.7}
.mind-load{display:grid;justify-items:center;gap:8px;padding:18px 0 4px;color:var(--ink-3);font-size:13px}
.mind-load>.m{width:56px;height:56px}.mind-load .sk-chat{width:100%}
.starters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px;max-width:560px}
.starter{font:500 13px/1.35 var(--sans);color:var(--ink);background:var(--card);border:var(--edge-s);border-radius:14px;padding:9px 13px;text-align:left;cursor:pointer;min-height:40px;text-wrap:balance}
.starter:hover:not(:disabled){background:var(--bear-w)}
.starter:disabled{cursor:default;color:var(--ink-2)}
.empty:has(.pre-n) .starter:disabled{opacity:.6;border-style:dashed}
.starter.kept{background:var(--d-yel)}
.askcard{display:flex;gap:14px;align-items:flex-start;align-self:flex-start;max-width:620px;background:var(--card);border:2px dashed var(--edge-ink);border-radius:var(--r2);padding:14px 16px;margin-top:6px}
.askcard>.m{width:48px;height:48px;flex:none}
.askcard b{font:800 16px/1.3 var(--serif);display:block}
.askcard p{font-size:14px;color:var(--ink-2);margin-top:4px}
.askcard blockquote{margin:10px 0 0;padding:10px 12px;background:var(--terra-wash);border-radius:12px;font-size:15px;line-height:1.45;color:var(--ink)}
.askcard .acts{margin-top:12px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3)}

/* tabbar: phone only */
.tabbar{display:none}

/* medium: the badge becomes a drawer */
/* Crachá tabs: Jeito and O que lembra. */
textarea.input{height:auto;padding:10px 12px}
.idcard .edit-p{margin-top:12px;background:var(--card)}
.idcard h2{padding-right:4px}
.pform{background:var(--card);border:var(--edge-s);border-radius:16px;padding:14px;display:grid;gap:12px;flex:none}
.pform .field{display:grid;gap:6px}.pform label,.pform .lbl{font-size:12.5px;font-weight:600;color:var(--ink-2)}
/* v7 tabs: the language picker of the landing, an ink edged track and the chosen one filled in ink. */
.tabs{display:flex;gap:4px;background:var(--card);border:var(--edge-s);border-radius:var(--rc);padding:3px;flex:none;position:sticky;top:-22px;z-index:2}
.tabs a{flex:1 1 auto;text-align:center;border-radius:9px;padding:8px 6px;font:700 13.5px/1.1 var(--sans);color:var(--ink-2);text-decoration:none;position:relative;white-space:nowrap}
.tabs a[aria-selected="true"]{background:var(--sel);color:var(--on-sel);box-shadow:inset 0 0 0 1.5px var(--sel-ring)}
.tabs a:not([aria-selected="true"]):hover{background:var(--bear-w);color:var(--ink)}
.tabs a:focus-visible{outline:3px solid var(--peng);outline-offset:1px}
.badge-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--terra);margin-left:5px;vertical-align:2px}
/* T420: the same dot by the member's name, in Sua trupe and atop the conversation, while something waits for the admin. */
.who b .appr-dot,.mini b .appr-dot{width:8px;height:8px;margin-left:10px;vertical-align:2px}
.mini b .appr-dot{width:9px;height:9px;vertical-align:4px}
.chat-h .who-n .appr-dot{flex:none;width:9px;height:9px;margin:0 var(--s1)}
.chat-h .av{position:relative}
.chat-h .av .appr-dot{display:none;position:absolute;top:0;right:0;width:11px;height:11px;margin:0;box-shadow:0 0 0 2px var(--chat-h)}
.chat-h.dot-av .who-n .appr-dot{display:none}
.chat-h.dot-av .av .appr-dot{display:block}
/* T85: the four tabs of the crachá. Rotinas carries how many there are; Ferramentas opens on Sabe fazer. */
.tab-n{font:600 11px/1 var(--sans);font-variant-numeric:tabular-nums;min-width:18px;height:18px;padding:0 5px;margin-left:5px;border-radius:99px;display:inline-grid;place-items:center;background:var(--card);color:var(--ink-2);vertical-align:1px;font-style:normal}
.tabs a[aria-selected="true"] .tab-n{background:var(--sage-wash);color:var(--ink)}
.kit-sub{display:grid;gap:8px}
.kit-sub+.kit-sub{border-top:1px dashed var(--line);padding-top:12px}
#lessonbox:not(:empty)+.kit-sub{border-top:1px dashed var(--line);padding-top:12px}
.kit-sub h4{font:600 12.5px/1.2 var(--sans);color:var(--ink-2);display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0}
.kit-sub h4 small{font-weight:500;color:var(--ink-3);font-size:12px}
.kit-sub.props .proposal{margin:0}
/* T388: the heading of the lessons waiting sits 12px over its card, and an empty error line takes no room at the card's foot. */
.kit-sub.props{gap:12px}.proposal>.formerr:empty{display:none}
/* T389: the card's title sits 12px over what it holds (8px left it nearer "Proposta de" than that sat to its lesson), each dashed
   line 12px from the block on either side, and an empty error line (the switch's, the skills') takes no room over the line. */
.kit>h3{margin-bottom:4px}.kit-sub+.kit-sub,#lessonbox:not(:empty)+.kit-sub{margin-top:4px}.kit-sub .formerr:empty{display:none}
.rail-sec{font:600 15px/1.2 var(--sans);margin:8px 0 0;scroll-margin-top:64px}
.memsec{display:flex;flex-direction:column;gap:12px}
#rotpanel{display:flex;flex-direction:column;gap:12px}
.rot-lede{font-size:12.5px;color:var(--ink-3);margin:0}
#rotpanel .enc-row{display:flex;flex-direction:column;gap:8px}
#rotpanel .kit h3{margin:0}
.enc-edit{display:grid;gap:6px;margin-top:6px}.enc-edit label{font-size:var(--t-sm);font-weight:600}
.enc-edit textarea{resize:vertical}#encrow>.formerr:empty{display:none}
.rot-tag{display:inline-block;font-weight:600;font-size:11.5px;padding:1px 7px;border-radius:999px;background:var(--honey-wash);color:var(--honey-ink)}
.tabpanel{display:flex;flex-direction:column;gap:14px;min-width:0}
.tabpanel .note{margin-top:0}.note.sm{padding:9px 12px;font-size:12.5px}
.lnk{color:var(--terra-ink);font-weight:600;text-decoration:none}.lnk:hover{text-decoration:underline}
.soul,.proposal{background:var(--card);border:var(--edge-s);border-radius:16px;padding:14px;display:grid;gap:10px}
details.house{border:1.5px dashed var(--edge-ink);border-radius:16px;padding:0 14px;font-size:13px;color:var(--ink-2)}
details.house[open]{padding-bottom:12px;background:var(--card)}
details.house summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;min-height:44px;margin:0 -14px;padding:0 14px;border-radius:15px;font-weight:600}
details.house summary::-webkit-details-marker{display:none}
details.house summary .hv{margin-left:auto;color:var(--ink-3);font:500 11.5px/1 var(--mono);white-space:nowrap}
details.house summary:focus-visible{outline:3px solid var(--peng);outline-offset:1px}
details.house ol{padding:4px 0 0 20px;display:grid;gap:6px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
details.house .hint{padding:8px 0 0;font-size:12.5px;color:var(--ink-2)}
.rule{background:var(--peri-wash);border:var(--edge-s);border-radius:16px;padding:14px;display:grid;gap:10px}
.rule .btn{justify-self:start}
.rule .rfor{color:var(--peri-ink);font-size:12.5px}
.rule #rview{display:grid;gap:10px}
.rule .hint{padding:0;color:var(--ink-2)}
.rule .soul-text.old{background:var(--card)}
.rule details.versions{background:var(--card)}
.chip.peri{background:var(--card);border-color:var(--edge-ink);color:var(--peri-ink)}
.sh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.sh small{color:var(--ink-3);font-size:12.5px}
.soul-text{white-space:pre-wrap;font-size:13.5px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.soul-text.old{background:var(--paper);border-radius:12px;padding:10px 12px;color:var(--ink-2);margin-top:8px}
.soul .btn,.fact .fx{justify-self:start}
.sform{display:grid;gap:8px}.sform textarea,.addfact textarea{resize:vertical;font:13.5px/1.5 var(--sans);min-height:90px}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.proposal{background:var(--terra-wash);border-color:var(--edge-ink)}
.proposal .ph{display:flex;gap:10px;align-items:center}.proposal .ph .m{width:48px;height:48px;flex:none}
.proposal .ph b{display:block;font:800 16px/1.25 var(--serif)}.proposal .ph small{color:var(--ink-2);font-size:12.5px}
.proposal blockquote,.fact blockquote{border-left:3px solid var(--line-2);padding:2px 0 2px 10px;font-size:13px;color:var(--ink-2);font-style:italic;overflow-wrap:anywhere}
.proposal blockquote{border-color:var(--terra)}
.diff{background:var(--card);border-radius:12px;padding:8px 10px;display:grid;gap:3px;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.diff p{padding:2px 8px;border-radius:8px}
.diff .dadd{background:var(--sage-wash);color:var(--rabbit-ink)}.diff .dadd::before{content:"+ ";font-family:var(--mono);color:var(--rabbit-ink)}
.diff .ddel{background:var(--paper-2);color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--pencil)}.diff .ddel::before{content:"- ";font-family:var(--mono)}
.diff .deq{color:var(--ink-2)}
.diff .dskip{font:11.5px/1.4 var(--mono);color:var(--ink-3);padding:0 8px}
details.versions,details.gone,details.addfact{background:var(--card);border:var(--edge-s);border-radius:16px;padding:0 14px;font-size:13.5px}
/* The whole closed box is the summary, a full finger tall: the box's padding lives on the line, so a tap anywhere opens it. */
details.versions[open],details.gone[open],details.addfact[open]{padding-bottom:12px}
details.versions summary,details.gone summary,details.addfact summary{list-style:none;display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink-2);cursor:pointer;min-height:44px;margin:0 -14px;padding:0 14px;border-radius:15px}
details.versions summary::-webkit-details-marker,details.gone summary::-webkit-details-marker,details.addfact summary::-webkit-details-marker{display:none}
.count{margin-left:auto;font:600 11.5px/1 var(--mono);background:var(--paper-2);border-radius:99px;padding:4px 8px;color:var(--ink-2)}
details.versions ol{list-style:none;padding:10px 0 0;display:grid;gap:10px}
details.versions li{border-top:1px dashed var(--line);padding-top:10px}
.vh2{display:grid;gap:2px}.vh2 small{color:var(--ink-3);font-size:12.5px}
.vacts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.msearch{position:relative;flex:none}.msearch .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.msearch .input{padding-left:36px;width:100%}
.facts{list-style:none;display:grid;gap:8px;padding:0;margin:8px 0 0}
.fact{background:var(--card);border:var(--edge-s);border-radius:14px;padding:11px 12px;display:grid;gap:6px;min-width:0}
.fact.warn{border-color:var(--edge-ink);background:var(--bear-w)}
.fact .ft{font-size:13.5px;line-height:1.5;overflow-wrap:anywhere}
/* T223: the key Usar em toda conversa / Deixar decidir and Esquecer share one line, and wrap whole on a narrow rail */
.fact .fbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;min-width:0}
.fact .pinsw{font-size:13px;color:var(--ink-2)}
.fact .pinsw[aria-checked="true"]{color:var(--ink)}
.fact .pinchip{justify-self:start;white-space:nowrap}
.src{font-size:12px;line-height:1.4;color:var(--ink-3);margin:0;padding:0;background:none;border:0}.src.by-outside{color:var(--honey-ink)}
.gone .fact{opacity:.8}.gone .ft{text-decoration:line-through;text-decoration-color:var(--pencil)}
.addfact form{display:grid;gap:8px;margin-top:10px}.addfact .pair{display:flex;gap:8px}.addfact .pair .input{flex:1;min-width:0}
/* T125: O que lembra never grows without end. Blocks keep the DS's 16px between them (the last note, Contar uma coisa
   and Esquecidos no longer touch); Sempre em mente shows 5, each topic is one closed line (name, count, its newest note)
   and only the one clicked opens, 5 notes at a time. A note is two lines and its source; one tap opens the rest. */
#memsec{display:grid;gap:var(--s4);min-width:0}
#memsec>.reread{margin:0 2px}
#mlist{display:grid;gap:var(--s5);min-width:0}
.mblock{display:grid;gap:var(--s2);min-width:0}
.mh{display:flex;align-items:center;gap:8px;font:800 17px/1.2 var(--serif);letter-spacing:-.02em;margin:0}
.mblock>.facts,.tp-b .facts{margin:0}
.mfound{font-size:12.5px;color:var(--ink-3);margin:0 2px}
.fact .fhead{display:flex;align-items:flex-start;gap:4px;min-width:0}
.fact .fhead .ft{flex:1;min-width:0;cursor:pointer;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.fact.open .fhead .ft{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible}
.fact .fmore{flex:none;width:30px;height:30px;margin:-4px -6px -4px 0;color:var(--ink-3)}
.fact .fmore[aria-expanded="true"]{background:var(--paper-2);color:var(--ink)}
.fact .fsrc{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.fact .fsrc .pinchip{padding:2px 8px;font-size:11.5px}
.fact .fx-more{display:grid;gap:8px;min-width:0}.fact .fx-more[hidden]{display:none}
.topics{list-style:none;padding:0;margin:0;display:grid;gap:8px;min-width:0}
.tp{background:var(--card);border:var(--edge-s);border-radius:var(--r2);min-width:0}
.tp.open{box-shadow:var(--hard-s)}
.tp-h{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:3px 8px;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:15px;background:none;color:var(--ink);text-align:left;cursor:pointer}
div.tp-h{cursor:default;padding-bottom:4px}
button.tp-h:hover{background:var(--paper-2)}.tp.open button.tp-h{border-radius:15px 15px 0 0}
.tp-n{font:700 14px/1.3 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tp-h .count{margin-left:0}
.tp-c{color:var(--ink-3)}.tp.open .tp-c{transform:rotate(90deg)}
.tp-s{grid-column:1/-1;font-size:12.5px;line-height:1.4;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tp.open .tp-s{display:none}
.tp-b{display:grid;gap:4px;padding:0 12px 10px;min-width:0}.tp-b[hidden]{display:none}
.tp-b .facts{gap:0}
.tp-b .fact{background:none;border:0;border-top:1px dashed var(--line-2);border-radius:0;padding:10px 0}
.tp-b .fact.warn{background:var(--bear-w);padding:10px 8px;margin:4px -8px;border-top-color:transparent;border-radius:10px}   /* T432: text on the axis of the topic, never glued to the header */
.tp-b .fact.warn+.fact:not(.warn){border-top-color:transparent}
.src .src-w{white-space:nowrap}
.mblock>.more,.tp-b>.more,details.gone>.more{margin:2px 0 0;background:none;border:0;padding:6px 0;font:600 13px/1.2 var(--sans);cursor:pointer;justify-self:start}
details.gone>.more{display:inline-block;margin-top:8px}
.msim{display:grid;gap:8px;background:var(--honey-wash);border:var(--edge-s);border-radius:var(--r2);padding:10px 12px;font-size:13.5px;line-height:1.45;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.msim p{margin:0}.msim .formerr{margin:0}
#mform .pair{align-items:stretch}#mform .pair .btn{height:auto;min-height:42px;flex:none}
#mform .formerr:empty{display:none}
.empty.sm{padding:12px}.empty.sm .m{width:84px;height:84px}.empty.sm h3{font-size:20px}.empty.sm p{font-size:13.5px}
.mpick{display:grid;gap:8px;container-type:inline-size}
/* T124: Próprio is a generator, its drawing big enough to judge and Sortear outro inside the card (on its own row when narrow); the six below in 6 columns, then 3 */
.mpick .mp.own{grid-template-columns:auto minmax(0,1fr) auto;justify-items:start;align-items:center;gap:10px;padding:6px 8px 6px 6px;text-align:left;font-size:13px}
.mp.own .mp-art{display:grid}.mp.own .mp-art .m{width:64px;height:64px}
.mp-txt{display:grid;gap:1px;min-width:0}.mp-txt small{font-size:12px;font-weight:400;color:var(--ink-2);line-height:1.35}
.mp-roll{gap:6px}
.mp-six{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
@container (max-width:460px){.mp-six{grid-template-columns:repeat(3,minmax(0,1fr))}.mpick .mp.own{grid-template-columns:auto minmax(0,1fr)}.mp-roll{grid-column:1/-1;justify-self:stretch}}
/* .mpick .mp: above .field label (display:block), which kept the name off center under the mascot */
.mpick .mp{position:relative;display:grid;justify-items:center;gap:2px;border-radius:14px;padding:6px 2px 4px;background:var(--paper);border:2px solid transparent;cursor:pointer;margin:0;font-size:11.5px;font-weight:400;color:var(--ink-2)}
.mp input{position:absolute;opacity:0;pointer-events:none}.mp .m{width:40px;height:40px}
.mp.on{background:var(--tint);border-color:var(--edge-ink);color:var(--ink);font-weight:600}
.mp:has(input:focus-visible){outline:3px solid var(--peng);outline-offset:-2px}   /* inside the chip: a scrolling rail never cuts it */
@media (max-width:1180px){
  body[data-view="chat"] .app{grid-template-columns:76px 260px minmax(0,1fr)}
  body[data-view="chat"] .rail{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100%;z-index:20;box-shadow:none;border-left:var(--edge);transform:translateX(105%);transition:transform .32s var(--ease);visibility:hidden}
  body.rail-open[data-view="chat"] .rail{transform:none;visibility:visible}
  .rail-x{display:inline-flex;align-self:flex-start;flex:none}
  .badge-btn{display:inline-flex}
  .chat-h .pill:not(.lav){display:none}
  .side{padding:18px 10px 12px}
}

/* T25: the one language picker (I18N.picker), a select like every other, on the login, sign-up and profile. */
.langsel{width:auto;min-width:150px;height:36px;font-size:14px}
.me-link{text-decoration:none;transition:background var(--dur),border-color var(--dur)}
.me-link:hover,.me-link[aria-current="true"]{border-color:var(--line-2);color:var(--ink)}
.me-link:focus-visible{outline:3px solid var(--peng);outline-offset:2px}
.profile-form{max-width:var(--read);display:grid;gap:14px}
.profile-form .pair{display:flex;gap:8px;align-items:stretch}.profile-form .pair .btn{height:auto;min-height:42px;flex:none}.profile-form .pair .input{flex:1;min-width:0}
.input.ro{display:flex;align-items:center;background:transparent;border-style:dashed;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* T191: the profile in two groups (Você, Organização), every section the same: title, one line, control. One line between
   two sections, one between the groups; the same 28px above and below each line. */
.profile .pf-grp{max-width:var(--read);margin-top:36px}
.profile .pf-grp+.pf-grp{padding-top:28px;border-top:1px solid var(--line)}
/* T359: on desktop the phone shortcuts (.cfg-mobile) are hidden, so the first group sits --s6 under the intro like every page. */
@media (min-width:761px){.profile>.lede+.cfg-mobile+.pf-grp{margin-top:0}}
.profile .pf-gh{margin:0 0 4px;font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.profile .vblk{max-width:var(--read);margin-top:16px}
.profile .vblk+.vblk{margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
.profile .vblk .cards{margin-top:0}
.profile .vblk-h{margin-bottom:16px}
.profile .vblk .form{margin-top:0}
.profile .profile-form .help:empty,.profile .profile-form .formerr:empty{display:none}
.profile .orglim .field .help{margin-top:6px}
/* T419: Aviso de resposta, the two switches one under the other; the notification's line sits under its own switch,
   lined up with its words (44px track + 10px gap), not under the track. */
.profile .ping-sws{gap:var(--s2)}
.profile .ping-n{display:grid}
.profile .ping-n .help{margin:0;padding-left:54px;max-width:calc(var(--measure) + 54px)}
/* T430: Foto in Perfil: the person's face at 64px (as the org sees it, round), 16px from its two buttons and the line of
   what goes; the buttons side by side, the line 8px under them. */
.pph-f>.lbl{margin-bottom:var(--s3)}
.pph-row{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:var(--s4);row-gap:var(--s2);align-items:center}
.pph-big{grid-row:1/3;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--peri-wash);color:var(--ink);border:var(--edge-s);font:800 26px/1 var(--sans)}
.pph-side{display:contents}
.pph-btns{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);align-self:end}
.pph-btns .btn[hidden]{display:none}
.pph-side .help{margin:0;align-self:start}
/* T430: on a phone the help leaves the narrow column beside the photo and runs the whole width under it */
@media (max-width:640px){.pph-big{grid-row:1}.pph-btns{align-self:center}.pph-side .help{grid-column:1/-1}}
.pph-f .pph-ok{margin-top:var(--s3)}
.pph-f .formerr{margin-top:var(--s3)}
.sess{flex-wrap:wrap}.sess .btn{margin-left:auto}
.sess-all{margin-top:12px}
.login-langs{margin-top:22px;display:flex;justify-content:center}
/* switching language: the words fade out, change, and fade back in. With reduced motion they just change. */
@media (prefers-reduced-motion:no-preference){
  .pane,.side .side-scroll,.dock .dk,.rail,.tabbar a{transition:opacity 180ms var(--ease)}
  body.lang-out .pane,body.lang-out .side .side-scroll,body.lang-out .dock .dk,body.lang-out .rail,body.lang-out .tabbar a{opacity:.12}
}
/* T281: the crachá's column opens and closes in .32s, the time of the drawer below 1180; closing, it stays visible until
   the column has closed over it. */
@media (min-width:1181px) and (prefers-reduced-motion:no-preference){
  body[data-view="chat"] .app{transition:grid-template-columns .32s var(--ease)}
  body[data-view="chat"] .rail{transition:opacity 180ms var(--ease),visibility 0s linear .32s}
  body.rail-open[data-view="chat"] .rail{transition:opacity 180ms var(--ease),visibility 0s}
}

/* phone */
@media (max-width:760px){
  .askcard{display:block;padding:12px 14px}.askcard>.m{float:left;width:40px;height:40px;margin:0 10px 2px 0}.askcard blockquote{clear:left}
  .app,body[data-view="chat"] .app,body.no-list .app{grid-template-columns:minmax(0,1fr)}
  .side,.dock{display:none}
  .cfg-mobile{display:block}
  .cfg-mobile .sec-t{padding:var(--s4) 0 var(--s2)}.cfg-mobile .sec-t:first-child{padding-top:0}
  /* T359: on the phone the settings list inside Perfil uses the Mais rows (card, 12px inside, 8px apart), not the 2px
     desktop menu rows that touched each other. */
  .cfg-mobile .cfg-rows{gap:var(--s2)}
  .cfg-mobile .cfg-row{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:12px 14px;min-height:56px}
  .home-rodas{display:flex;flex-direction:column;gap:4px;margin-top:var(--s6)}
  .home-rodas .sec-t{padding:0 0 10px}   /* T425: the underline 9px over the first sala, was 5px */
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:10;justify-content:space-around;padding:8px 10px calc(10px + env(safe-area-inset-bottom));border-top:var(--edge);background:var(--card)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--ink-3);padding:4px 2px;border-radius:12px;flex:1;min-width:0;white-space:nowrap}
  .tabbar a[aria-current="true"]{color:var(--ink)}
  .tabbar a[aria-current="true"] .ic{color:var(--terra-ink)}
  .tabbar .ic{width:22px;height:22px}
  body[data-view="chat"] .tabbar,body[data-view="sala"] .tabbar,body[data-view="novo"] .tabbar,body[data-view="chave"] .tabbar,body[data-view="login"] .tabbar,body.booting .tabbar{display:none}
  .home,.page{padding:22px 16px calc(96px + env(safe-area-inset-bottom))}
  .brand-m{display:inline-flex}
  .home-top .mono{order:3;flex-basis:100%;margin-top:14px}
  .home-h h1{font-size:36px;margin-top:6px}
  .home-h p{font-size:15px;margin-top:8px}
  .me-chip{display:flex}
  .me-chip .btn{display:none}
  .me-chip .me-link{min-height:32px}
  .mural{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:var(--s6)}
  .home .home-casos{margin-top:var(--s6)}
  .mini{min-height:184px;padding:11px 11px 12px;border-radius:20px}
  .mini .m{width:72px;height:72px;margin:6px auto 4px}
  .mini b{font-size:19px}
  .mini .dot{top:12px;right:11px}
  .away{margin-top:var(--s6)}
  .aw-cards{columns:auto;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin:0 -16px;padding:2px 16px 10px;scrollbar-width:none;align-items:flex-start}
  .aw-cards::-webkit-scrollbar{display:none}
  .aw-card{flex:0 0 84%;scroll-snap-align:start;margin-bottom:0;transition:max-height .3s var(--ease)}
  /* T359: the carousel takes the height of the card in view (fitAway): a taller card peeking at the side is cut at that
     height and fades out, so a short card leaves no hole above the members. */
  .aw-card.peek{max-height:var(--fit,none);overflow:hidden;-webkit-mask-image:linear-gradient(#000 calc(100% - 56px),transparent);mask-image:linear-gradient(#000 calc(100% - 56px),transparent)}
  .aw-cards .aw-card:only-child{flex-basis:100%}
  .aw-t h2{font-size:20px}
  .page .back{display:inline-flex}
  .chat-h{padding:10px 12px;gap:10px}
  .chat-h .back{display:inline-flex;width:34px;border:0;background:transparent}
  .chat-h .av{width:42px;height:42px;border-radius:13px}
  .chat-h .av .m{width:38px;height:38px}
  .chat-h .who h1{font-size:21px}
  .chat-h .who p{font-size:12px;display:grid;gap:1px;margin-top:2px}
  .chat-h .who .st{gap:5px}
  .chat-h .pill{display:none}
  .chat-h .sp{display:none}
  .chat-h .who{flex:1 1 auto}
  .badge-btn{height:32px;padding:0 10px}
  .msgs{padding:14px 12px 6px;gap:11px;--mgap:11px}
  .rchip{height:32px;padding:0 11px}
  .b{font-size:14.5px;max-width:86%}
  .row-it .b{max-width:calc(100% - 44px)}
  .row-it.split .parts{max-width:calc(100% - 44px)}
  .row-it.split .parts .b{max-width:100%}
  .composer{margin:6px 10px 6px}
  .att-tray{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .att-it{flex:none;max-width:170px}
  .atts .att-img,.atts .att-img img{max-width:200px}
  /* T379 acabamento: on the phone a reply with files takes the whole bubble column; the picture fills the bubble's width
     (a chart's labels stay readable, a tap opens it whole) and the file card under it ends on the same right edge. */
  .row-it .b.it.has-atts,.row-it.split .parts:has(.b.it.has-atts){width:calc(100% - 44px)}
  .row-it.split .parts .b.it.has-atts{width:100%}
  .b.it.has-atts>.atts{flex-direction:column;align-items:stretch}
  .b.it.has-atts .atts .att-img,.b.it.has-atts .atts .att-file{max-width:none;width:100%}
  .b.it.has-atts .atts .att-img img{max-width:100%;width:100%;max-height:420px}
  .img-dlg figure{padding:calc(72px + env(safe-area-inset-top)) 16px calc(72px + env(safe-area-inset-bottom))}
  .img-dlg img{max-height:calc(100dvh - 184px - env(safe-area-inset-top) - env(safe-area-inset-bottom));box-shadow:var(--hard-s)}
  .pdf-dlg .pdf-top{padding:calc(var(--s3) + env(safe-area-inset-top)) var(--s4) var(--s3)}
  .pdf-dlg .pdf-pages{padding:var(--s4) var(--s3) calc(var(--s10) + env(safe-area-inset-bottom));gap:var(--s3)}
  .pdf-dlg .pdf-pages img{max-height:none;box-shadow:var(--hard-s)}
  .b.it.has-atts .atts .att-pdf .att-pg{height:180px}
  .img-dlg .img-x{top:calc(16px + env(safe-area-inset-top));right:16px}
  .att-err{margin:-2px 12px 4px}
  .hint-under{margin:6px 10px calc(12px + env(safe-area-inset-bottom));font-size:11.5px}
  body[data-view="chat"] .rail{width:100%;border-left:0;padding:16px 14px 24px}
  .tabs .tab-n{margin-left:4px;min-width:16px;height:16px;padding:0 4px;font-size:10.5px}
  .pair,.choices,.choices.two,.invite{grid-template-columns:1fr}
  /* T424: a pair stacked on a phone keeps the form's 18px between its two fields, not the 14px between columns. */
  .form>.pair{row-gap:18px}
  .keyrow{flex-wrap:wrap}
  /* T373: in Arquivos the icon stays on the file's name, whether its line under it takes one line or two. */
  .filerow>.initial{align-self:flex-start}
  .keyrow small{margin-left:50px;flex-basis:100%}
  .ev .chip{display:none}
  .evx-b{padding-left:12px}
  .filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .person select{width:110px}
  .person .rm{width:38px}
  .dlg-acts .btn{flex:1 1 auto}
  .tabs{gap:2px;padding:3px;top:-16px}.tabs a{padding:12px 4px;font-size:12.5px}
  .btn.sm{height:38px;padding:0 12px}
  .badge-btn{height:38px}
  .kv .lnk{display:inline-block;padding:8px 0;margin:-8px 0}
  .starters{flex-direction:column;align-items:stretch}
}


/* motion: breathe, blink, think, enter. Nothing spins. All of it stops with reduced motion. */
@media (prefers-reduced-motion:no-preference){
  .m .m-body{transform-origin:60px 104px}
  .m.breathe .m-body{animation:breathe 4.2s ease-in-out infinite}
  .agent:nth-child(2n) .m-body,.mini:nth-child(2n) .m-body{animation-delay:-1.3s}
  .agent:nth-child(3n) .m-body,.mini:nth-child(3n) .m-body{animation-delay:-2.4s}
  .m-think .m-dot{animation:dot 1.1s ease-in-out infinite}
  .m-think .m-dot:nth-child(2){animation-delay:.15s}.m-think .m-dot:nth-child(3){animation-delay:.3s}
  .m-zz{animation:zz 2.8s ease-in-out infinite}
  .m-spark{transform-box:fill-box;transform-origin:center;animation:twinkle 1.8s ease-in-out infinite}.m-spark2{animation-delay:-.9s}
  .m-knock{transform-box:fill-box;transform-origin:50% 100%;animation:knock 2.2s ease-in-out infinite}
  .mark.breathe{animation:hop 1.4s var(--ease) infinite}.mark.breathe .m-body{animation:none}
  .mini:hover .m-body,.agent:hover .m-body,.chat-h .av:hover .m-body{animation:hop .6s var(--ease)}
  .typing i{animation:dot 1.1s ease-in-out infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
  .enter{animation:enter .42s var(--ease) both;animation-delay:var(--d,0ms)}
  .tabs a{transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
  .mp{transition:transform var(--dur) var(--spring),background var(--dur) var(--ease)}
  .mp:hover{transform:translateY(-2px) rotate(-2deg)}.mp.own:hover{transform:translateY(-1px)}
  .proposal .ph .m{animation:knock 2.4s var(--ease) 1}
  .b.me.enter{animation-name:enter-me}
  /* Loading and error swap quickly: the thinking bubble comes in and leaves in 200 ms, the error that replaces it too. */
  .thinking.enter,.row-n.enter{animation-duration:.2s}
  .row-n.enter .notice{animation:none}
  .thinking.leave{animation:leave var(--dur) var(--ease) both}
  @keyframes leave{to{opacity:0;transform:translateY(-4px)}}
  .notice{animation:enter .5s var(--spring) both}
  .mini,.agent,.aw-card{animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
  /* T425: a row drawn again in place (patchKids) already rose in: it stays put, even when the list reorders it. */
  .mini.placed,.agent.placed{animation:none}
  .sk{animation:shimmer 1.4s linear infinite}
  .pill:hover,.labels i:hover,.chip:hover{transform:translateY(-1px) rotate(-1.5deg)}
  @media (min-width:761px){.chat-h .find-btn:hover{transform:translateY(-1px) rotate(-1.5deg)}}
  .choice:hover{transform:translateY(-2px)}
  .bdots i{animation:dot 1.1s ease-in-out infinite}.bdots i:nth-child(2){animation-delay:.15s}.bdots i:nth-child(3){animation-delay:.3s}
  .mind-load>.m .m-body{transform-origin:60px 104px;animation:breathe 2.4s ease-in-out infinite}
  .fact.leaving{animation:leave .32s var(--ease) both}
  .mp.on .m-body{transform-origin:60px 104px;animation:hop .6s var(--ease)}
  .starter{transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
  .starter:hover:not(:disabled){transform:translateY(-2px) rotate(-.6deg)}
  @keyframes leave{to{opacity:0;transform:translateX(14px) scale(.98)}}
  @keyframes breathe{50%{transform:scale(1.03,.97)}}
  @keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-3px);opacity:1}}
  @keyframes zz{0%{transform:translate(0,4px);opacity:0}30%{opacity:1}100%{transform:translate(6px,-8px);opacity:0}}
  @keyframes twinkle{50%{transform:scale(.6) rotate(20deg);opacity:.6}}
  @keyframes knock{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-10deg)}80%{transform:rotate(8deg)}90%{transform:rotate(-4deg)}}
  @keyframes hop{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-7px) scale(.98,1.03)}70%{transform:translateY(0) scale(1.04,.96)}}
  @keyframes enter{from{opacity:0;transform:translateY(10px) scale(.98)}}
  @keyframes enter-me{from{opacity:0;transform:translate(10px,6px) scale(.97)}}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}}
  @keyframes shimmer{from{background-position:100% 0}to{background-position:-200% 0}}
}
.keep-f .formerr:empty,.kept-f .formerr:empty,.kept-acts .formerr:empty,.pform .formerr:empty,.sform .formerr:empty{display:none}

/* Mesa picker: who already sits there, and a heads up when the mesa is another team's. */
.mesa-who{margin-top:10px;display:grid;gap:8px;font-size:var(--t-sm);color:var(--ink-2)}
.mesa-who .mw-row{display:flex;align-items:center;gap:14px;min-height:30px}
.mesa-who .mw-warn{display:flex;gap:8px;align-items:flex-start;background:var(--honey-wash);border:var(--edge-s);border-radius:14px 14px 14px 4px;padding:10px 12px;color:var(--ink-2);text-wrap:pretty}
.mesa-who .mw-warn .ic{flex:none;margin-top:1px;color:var(--honey-ink)}
.pform .mesa-who{margin-top:4px}

/* Conexões: one card per connection, the person's own account on top, what each agent may do below. */
.conns{display:grid;gap:14px;max-width:var(--col)}
.conn{background:var(--card);border:var(--edge-s);border-radius:18px;padding:16px 18px;display:grid;gap:12px}
.conn-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.conn-h .kic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--sky-wash);color:var(--ink)}
.conn-h b{font-size:var(--t-md, 16px)}.conn-h small{display:block;color:var(--ink-3);font-size:12.5px}
.conn-h .kic.logo{background:var(--logo-tile);border:var(--edge-s)}
.conn-h .kic.logo .ic{width:22px;height:22px}
/* Slack: one card, two parts (each member as its own app; the person's own account). */
.conn-part{display:grid;gap:12px;border-top:1px solid var(--line);padding-top:12px}
.conn-ph{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.conn-ph b{font-size:var(--t-sm)}.conn-ph small{display:block;color:var(--ink-3);font-size:12.5px;text-wrap:pretty}
.conn-ph>div{flex:1 1 260px;min-width:0}
.conn-part .conn-ags{border-top:0;padding-top:0}
.conn-h .sp{flex:1}
/* T69: on a wide screen the name and description take what is left beside the button and wrap there, so the button
   stays on the right as on Notion's card. Below 761px the row keeps wrapping as before. */
@media (min-width:761px){
  body[data-view=conexoes] .conn-h>.kic{flex:none}
  body[data-view=conexoes] .conn-h>div{flex:1 1 0;min-width:0;text-wrap:pretty}
  body[data-view=conexoes] .conn-h>.btn{flex:none}
  body[data-view=conexoes] .conn-h>.sp{display:none}
}
.conn-me{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;font-size:var(--t-sm)}
.conn-me .st{display:inline-flex;align-items:center;gap:var(--s2);text-wrap:pretty}
.conn-me .sp{flex:1}
.conn-ags{display:grid;border-top:1px solid var(--line);padding-top:var(--s4)}
.conn-ags:not([open])>:not(summary){display:none}
.conn-ags summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;min-height:44px;border-radius:12px;font-size:var(--t-sm)}
.conn-ags summary::-webkit-details-marker{display:none}
.conn-ags summary:focus-visible{outline:3px solid var(--peng);outline-offset:2px}
.conn-ags summary .ic{flex:none;color:var(--ink-3);transition:transform .2s var(--ease)}
.conn-ags[open] summary .ic{transform:rotate(90deg)}
/* T70: the old sans spaced at 0.2em, ~2px at 12.5px, the same as the gap between its letters, so "0 de 1 com acesso" read as one word */
.conn-ags summary small{display:block;color:var(--ink-3);font-size:12.5px;font-weight:500;word-spacing:.1em}
/* T363 (Rapha 04/11, "tá tudo grudado"): the help line sits under the title's text (past the chevron) with room on both
   sides; each member is a row of its own, 12px above and below, a hairline between rows; the face keeps 12px from the
   name. Name and chips share the row when the chips leave the name ~110px (measured in PT, EN and ES: up to 3 chips from
   340px of list, 4 from 420px, 5 from 500px); otherwise the chips go under the name, on the name's edge, so name and
   chips read as one block. .nN is how many chips the connection offers. */
.conn-ags p{margin:0;color:var(--ink-3);font-size:12.5px;line-height:1.5;text-wrap:pretty}
.conn-ags>p{padding:var(--s1) 0 var(--s4) 26px}
.conn-agl{display:grid;border-top:1px solid var(--line);container-type:inline-size}
.conn-ag{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:var(--s2) var(--s3);padding:var(--s3) 0}
.conn-ag+.conn-ag{border-top:1px solid var(--line)}
.conn-ag .av{grid-row:span 2;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;overflow:hidden}
.conn-ag .av .m{width:30px;height:30px}
.conn-ag .who{min-width:0;font-size:var(--t-sm);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* T399: the members already in Slack as their own app, in the Slack card: name, and under it where (dot, workspace). */
.sl-onl>.conn-ag{row-gap:var(--s1)}
.sl-onl .sl-on{display:flex;align-items:center;gap:var(--s2);min-width:0;color:var(--ink-3);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@container (min-width:340px){
  :is(.n1,.n2,.n3)>.conn-ag{grid-template-columns:32px minmax(0,1fr) auto}
  :is(.n1,.n2,.n3)>.conn-ag .av{grid-row:auto}
}
@container (min-width:420px){
  .n4>.conn-ag{grid-template-columns:32px minmax(0,1fr) auto}
  .n4>.conn-ag .av{grid-row:auto}
}
@container (min-width:500px){
  .n5>.conn-ag{grid-template-columns:32px minmax(0,1fr) auto}
  .n5>.conn-ag .av{grid-row:auto}
}
.gchips{display:flex;gap:6px;flex-wrap:wrap}
.gchip{border-radius:99px;padding:6px 11px;font:600 12px/1 var(--sans);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;background:var(--card);border:var(--edge-s);color:var(--ink-2);min-height:30px}
.gchip[aria-pressed="true"]{background:var(--sage-wash);border-color:var(--edge-ink);color:var(--rabbit-ink)}
/* T98: Excluir ligado avisa em mel, nunca em vermelho. */
.gchip[data-g="delete"][aria-pressed="true"]{background:var(--honey-wash);border-color:var(--edge-ink);color:var(--honey-ink)}
.del-dlg .del-note{display:flex;gap:8px;align-items:flex-start;background:var(--honey-wash);color:var(--ink);border-radius:12px;padding:10px 12px}
.del-dlg .del-note .ic{flex:none;margin-top:2px}
.gchip:disabled{cursor:default}
.gchip.busy{cursor:progress;opacity:.75}
.gchip:focus-visible{outline:3px solid var(--peng);outline-offset:2px}
.conn-err{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;background:var(--honey-wash);border:var(--edge-s);border-radius:14px;padding:10px 12px;font-size:var(--t-sm);color:var(--ink)}
.conn-err:empty{display:none}
.conn-err{flex-wrap:wrap}.conn-err>span{flex:1 1 200px}.conn-err .btn{flex:none;margin-left:auto}
.conn-setup{background:var(--honey-wash);border:var(--edge-s);border-radius:14px;padding:12px 14px;font-size:var(--t-sm);color:var(--ink);display:grid;gap:8px}
.conn-setup p{margin:0;color:var(--ink-2)}
.conn-setup ol{margin:0;padding-left:20px;display:grid;gap:4px;overflow-wrap:anywhere}
.conn-setup-a{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.conn-wait{display:flex;align-items:center;gap:7px;margin:0;font-size:var(--t-sm);color:var(--ink-2)}
.conn-ok{display:flex;gap:10px;align-items:center;background:var(--sage-wash);border:var(--edge-s);border-radius:14px;padding:10px 12px;font-size:var(--t-sm);color:var(--ink);max-width:var(--col);margin-bottom:14px}
/* T350: the word back from a sign-in sits inside its card, between the account line and the members */
.conn-note{margin:0;max-width:none;flex-wrap:wrap;align-items:center}.conn-note>span{flex:1 1 220px}.conn-note .btn{flex:none;margin-left:auto}
.conns [data-server]{scroll-margin-top:12px}
.conn-tech{max-width:var(--measure);margin-top:22px;font-size:var(--t-sm);color:var(--ink-2)}
.conn-tech summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-weight:600}
.conn-tech p{margin:10px 0 0}
.conn-tech .linkbox{margin-top:8px}
.kic.logo{color:var(--logo-ink)}
/* T346: no mark of its own yet: its initial, in the logo's tile and size. */
.kic.logo.ini{font:800 17px/1 var(--serif)}
.conn-ph .kic.logo.ini,.conn-what .kic.logo.ini{font-size:14px}
.conn-ph .kic,.conn-what .kic{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:10px;background:var(--logo-tile);border:var(--edge-s)}
.conn-ph .kic .ic,.conn-what .kic .ic{width:17px;height:17px}
.conn-what{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.conn-what li{display:flex;align-items:center;gap:10px;font-size:var(--t-sm);color:var(--ink-2);text-wrap:pretty}
.conn-what li b{color:var(--ink);display:block}
.conn-keep{display:flex;gap:8px;align-items:flex-start;margin:0;background:var(--honey-wash);border:var(--edge-s);border-radius:12px;padding:9px 12px;font-size:var(--t-sm);color:var(--ink)}
.conn-keep .ic{flex:none;margin-top:2px}
.conn-each{margin:0;color:var(--ink-2)}
.sk-conn{height:132px;border-radius:18px;max-width:var(--col)}
/* T354: Conexões is a grid of compact cards; each one's detail opens in the side panel (.connp). */
.conns.cgrid{gap:14px}
.conn-c{background:var(--card);border:var(--edge-s);border-radius:var(--r2);padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.conn-c.on{box-shadow:var(--hard-s)}
.cc-h,.connp-h{display:flex;align-items:center;gap:12px;min-width:0}
.cc-h .kic,.connp-h .kic{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px}
.cc-h .kic.logo,.connp-h .kic.logo{background:var(--logo-tile);border:var(--edge-s)}
.cc-h .kic.logo .ic,.connp-h .kic.logo .ic{width:22px;height:22px}
.cc-t{flex:1;min-width:0}
.cc-t b{display:block;font-size:var(--t-md, 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-t small{display:block;color:var(--ink-3);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-apps{display:flex;flex-wrap:wrap;gap:6px}
.cc-app{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--logo-tile);border:var(--edge-s)}
.cc-app .ic{width:16px;height:16px}
.cc-app.off .ic{filter:grayscale(1);opacity:.4}
.cc-face{overflow:hidden}.cc-face>*{width:24px;height:24px}
.cc-more{font:700 11.5px/1 var(--sans);color:var(--ink-2)}
.cc-f{display:flex;align-items:center;gap:10px;margin-top:auto}
.cc-st{flex:1;min-width:0;display:grid;gap:2px;font-size:var(--t-sm)}
.cc-st .st{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.cc-st small{color:var(--ink-3);font-size:12.5px;word-spacing:.1em}
.cc-f .btn{flex:none}
.connp{position:fixed;top:0;right:0;bottom:0;z-index:40;width:min(480px,100vw);display:flex;flex-direction:column;background:var(--card);border-left:var(--edge);outline:none}
.connp-h{align-items:flex-start;padding:var(--s6) var(--s6) var(--s5);border-bottom:1px solid var(--line)}
.connp-t{flex:1;min-width:0;padding-top:2px}
.connp-t h2{margin:0;font:800 22px/1.2 var(--serif);letter-spacing:-.02em;overflow-wrap:anywhere}
.connp-t small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:4px;text-wrap:pretty}
.connp-b{flex:1;overflow:auto;padding:var(--s6) var(--s6) var(--s12);overscroll-behavior:contain}
/* T363: one rhythm in the panel: 24px between its blocks (account, members, Remover), the button 12px under the line it
   acts on, never against the divider below. */
.connp .conn{background:none;border:0;border-radius:0;padding:0;gap:var(--s6)}
.connp .conn-me{flex-direction:column;align-items:flex-start}
.connp .conn-me .sp{display:none}
.connp .conn-part{gap:var(--s4);padding-top:var(--s6)}
.connp .conn-what{gap:var(--s4) var(--s3)}
.connp .conn-google>.conn-part:first-of-type,.connp .conn-slack>.conn-part:first-child{border-top:0;padding-top:0}
/* T399 spacing: in the Slack panel the help takes the panel's width and the button goes under it, 12px down (a spacer
   beside the text took half the row and broke the help in short lines); the last member is the end of its block, so
   the line to Sua conta do Slack sits 24px under it and 24px over the title, like every block in the panel. */
.connp .conn-slack .conn-ph>div{flex-basis:100%}
.connp .conn-slack .conn-ph>.sp{display:none}
.connp .sl-onl>.conn-ag:last-child{padding-bottom:0}
/* T413: the footer takes the parts' rhythm, a hairline and 24px, like every block above it in the panel. */
.conn-foot{display:flex;align-items:center;gap:var(--s3) var(--s4);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:var(--s6)}
.conn-foot small{flex:1 1 180px;color:var(--ink-3);font-size:12.5px;line-height:1.5;text-wrap:pretty}
.conn-foot .btn{flex:none;margin-left:auto}
/* T413: Tirar da trupe, one button per app (several in Google), together at the footer's end. */
.conn-rms{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s2);margin-left:auto}
.conn-rms .btn{margin-left:0}
@media (min-width:1181px){.page.with-p{--side:480px}}
@media (prefers-reduced-motion:no-preference){
  .connp.slide{animation:connp-in var(--dur) var(--ease)}
  @keyframes connp-in{from{transform:translateX(24px);opacity:0}}
}
@media (max-width:760px){
  .conn{padding:14px}
  .connp{width:100vw;border-left:0}
  /* T363: five chips (Jira, in Spanish) stay on one line under the name at 390 */
  .conn-ag .gchip{padding-inline:9px}
  /* T399 spacing: on the phone the line under the name takes the header's width, under logo, name and close, so it
     reads in one line ("que / se completam" broke in two beside the logo). */
  .connp-h{padding:var(--s4);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s3)}
  .connp-t{display:contents}
  .connp-t h2{grid-column:2;grid-row:1}
  .connp-t small{grid-column:1/-1;grid-row:2;margin-top:0}
  .connp-b{padding:var(--s5) var(--s4) calc(var(--s10) + env(safe-area-inset-bottom))}
}
/* A card comes in quickly (200 ms) and the loading shimmer moves; with reduced motion both are still. */
@media (prefers-reduced-motion:no-preference){
  .conn.enter{animation:enter .2s var(--ease) both;animation-delay:var(--d,0ms)}
  .sk-conn{animation:shimmer 1.4s linear infinite}
  .gchip{transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
}


/* Gateway da org: one card per name in the vault, the saved value only masked, an input under it to paste a new one. */
.gwrows{display:grid;gap:12px}
.gwrow{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:var(--edge-s);border-radius:16px;padding:14px;min-width:0}
.gwrow .kic{background:var(--l);color:var(--ink)}
.gwmain{display:grid;gap:6px;flex:1;min-width:0}
.gwmain label{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.gwmain label code{color:var(--ink-3);font-size:12px;font-weight:500}
.gwstate{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0;min-width:0}
.gwval{background:var(--l);border-radius:8px;padding:2px 8px;overflow-wrap:anywhere}
.gwval.none{background:none;padding:0;color:var(--ink-3);font-size:var(--t-sm)}
.gwstate small{color:var(--ink-3);font-size:12.5px}
.gwmain .input{width:100%;min-width:0;font:13px/1.4 var(--mono)}
.gwmain .input::placeholder{font-family:var(--mono)}
.gwform .help{margin:-6px 0 0}
.sk-gw{height:118px}
.gwrow.just{border-color:var(--sage)}
/* Conta do integrante, in the crachá */
.kv>div.cred{display:grid;gap:8px}
.credv{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.credv b{font-weight:600}
.credpays{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.credacts{display:inline-flex;flex-wrap:wrap;align-items:center;gap:12px}
.credform .kit-acct{margin:0 0 12px}
.credform #credcap{display:grid;gap:4px;font-size:13px;color:var(--ink-2)}
.credform #credcap .input{max-width:160px}
.credform .opt.off{color:var(--ink-3);cursor:not-allowed}
@media (max-width:640px){
  .gwrow{padding:12px}
  .gwrow .kic{display:none}
  .credform .opt{min-height:36px}
}
@media (prefers-reduced-motion:no-preference){
  .gwrow{animation:enter .2s var(--ease) both;animation-delay:var(--d,0ms)}
  .sk-gw{animation:shimmer 1.4s linear infinite}
  .gwrow.just{animation:gw-saved 1.2s var(--ease) both}
  .credform:not([hidden]){animation:enter .2s var(--ease) both}
}
@keyframes gw-saved{from{box-shadow:0 0 0 4px var(--sage-wash)}to{box-shadow:0 0 0 0 transparent}}
/* F13: the model the agent runs on, at the top of its chat; and Ferramentas, one block per kind of thing it works with. */
.model-pick{position:relative;flex:none}
button.model-pill{cursor:pointer}
.model-pill .ic{width:15px;height:15px;flex-shrink:0}
.model-pill .mlabel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* T351: the engine's own mark in place of its name (Claude's spark in its clay, ChatGPT's blossom in ink), at the icon's
   size: 15px like the other pills of the header, so the three share one height. */
.model-pill .mmark{display:inline-flex;flex:none;width:15px;height:15px}
.model-pill .mmark svg{width:15px;height:15px}
.model-pill .mmark-openai svg{fill:currentColor}
.model-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:30;width:min(320px,86vw);background:var(--card);border-radius:16px;padding:10px;border:var(--edge);box-shadow:var(--hard);display:flex;flex-direction:column;gap:8px}
.model-menu[hidden]{display:none}
.model-menu{max-height:calc(100dvh - 140px);overflow:hidden;padding:0;gap:0}
/* T334: the body scrolls, the foot (Voltar esta conversa ao padrão, the error) stays whole at the bottom edge. */
.mbody{display:flex;flex-direction:column;gap:8px;padding:10px;min-height:0;flex:1 1 auto;overflow:auto;overscroll-behavior:contain}
.mfoot{flex:none;display:flex;flex-direction:column;gap:6px;padding:0 10px}
.mfoot:has(#mclear),.mfoot:has(.formerr:not(:empty)){padding:8px 10px 10px;border-top:1px solid var(--line);background:var(--card)}
.mfoot .formerr:empty{display:none}
.model-menu.more .mfoot{box-shadow:0 -10px 12px -10px rgba(30,25,20,.28)}.model-menu.more .mfoot:not(:has(#mclear)){padding-top:1px}
.mgroup{display:flex;flex-direction:column;gap:2px}
.mgroup b{font:600 11.5px/1.4 var(--sans);color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;padding:4px 8px}
.mopt{display:flex;justify-content:space-between;align-items:center;min-height:36px;padding:6px 10px;border-radius:10px;border:0;background:none;font:500 14px/1.2 var(--sans);color:var(--ink);text-align:left;cursor:pointer}
.mopt:hover,.mopt:focus-visible{background:var(--paper)}
.mopt.on{font-weight:600}
.mother{display:flex;flex-direction:column;gap:6px;border-top:1px dashed var(--line);padding-top:8px}
.mother label{font-size:12.5px;color:var(--ink-3)}
.mother .row{display:flex;gap:6px;align-items:center}.mother select{flex:none;width:auto;max-width:44%}.mother input{flex:1;min-width:0}
/* Select, input and Usar: one height, one axis. */
.mother .row>.input,.mother .row>.btn{height:36px;margin:0}.mother .row>select.input{background-position:calc(100% - 17px) 15px,calc(100% - 12px) 15px}
.model-menu .help{font-size:12px;margin:0}
.mforall{display:flex;gap:8px;align-items:flex-start;margin:0;padding:8px 10px;border-radius:10px;background:var(--paper);font:500 12.5px/1.4 var(--sans);color:var(--ink-2)}
.mforall .ic{flex:none;width:14px;height:14px;margin-top:2px}
.mvia{padding:0 8px;color:var(--ink-3)}
label.mvia{display:flex;flex-direction:column;gap:4px}
.mwhy{margin:0;padding:0 8px 2px;font-size:12px;line-height:1.4;color:var(--ink-3)}
.mwhy .lnk{font-weight:600}
.mopt:disabled{color:var(--ink-3);opacity:.55;cursor:not-allowed;background:none}
/* T334: model, effort and account in one pill; the menu picks for this conversation or as the default for everyone. */
.model-pill.warn{background:var(--honey-wash);color:var(--honey-ink)}
.mscope{display:flex;gap:4px;padding:3px;border-radius:12px;background:var(--paper);border:var(--edge-s)}
.mscope button{flex:1 1 0;min-width:0;border:0;background:none;border-radius:9px;padding:8px 6px;font:700 13px/1.1 var(--sans);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.mscope button.on{background:var(--sel);color:var(--on-sel);box-shadow:inset 0 0 0 1.5px var(--sel-ring)}
.mscope button:not(.on):hover{color:var(--ink)}
.mscope button:focus-visible,.mopt:focus-visible{outline:3px solid var(--peng);outline-offset:1px}
.mseg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:0 2px}
.mseg .mopt{justify-content:center;padding:6px 4px;border:var(--edge-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mseg .mopt.on{background:var(--sel);color:var(--on-sel);box-shadow:inset 0 0 0 1.5px var(--sel-ring)}
.mopt>span{min-width:0}
.mopt small{display:block;margin-top:2px;font:500 12px/1.3 var(--sans);color:var(--ink-3)}
.macct{display:flex;flex-direction:column}
.macct .lnk{padding:0 10px 4px;font-size:12.5px;font-weight:600}
.mdown{display:flex;gap:8px;align-items:flex-start;margin:0;padding:8px 10px;border-radius:10px;background:var(--honey-wash);font:500 12.5px/1.4 var(--sans);color:var(--ink)}
.mdown .ic{flex:none;width:14px;height:14px;margin-top:2px}
.mdown .lnk{font-weight:600;white-space:nowrap}
#mclear{align-self:flex-start}
.kit{background:var(--card);border:var(--edge-s);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.kit h3{display:flex;align-items:center;gap:10px;font-size:14px}
.kit .kv{border:0;padding:0;background:none}
.kit-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.kit-list li{display:flex;justify-content:space-between;gap:10px}.kit-list span{color:var(--ink-3)}
/* The model is the one pill the header keeps on narrow screens: it is how the agent is changed, not decoration. */
.chat-h .pill.model-pill{display:inline-flex}
@media (max-width:720px){.chat-h .pill.model-pill{padding:6px 9px;font-size:12px;max-width:min(52vw,240px);min-width:0;overflow:hidden}.model-menu{position:fixed;top:88px;left:12px;right:12px;width:auto;max-height:calc(100dvh - 80px);overflow:hidden}}
/* F11: a skill the agent learned, as a line in the conversation and as a list in Kit. */
.skill-n span{display:inline}.skill-n b{font-weight:600;color:var(--ink-2)}
.kit-skills{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.kit-skills summary{cursor:pointer;display:flex;flex-direction:column;gap:2px;font-size:13.5px;padding:4px 0}
.kit-skills summary span{color:var(--ink-3);font-size:12.5px}
.skill-body{white-space:pre-wrap;font:12.5px/1.5 var(--mono,ui-monospace,monospace);background:var(--paper);border-radius:10px;padding:10px;margin:6px 0;max-height:280px;overflow:auto}
/* T28: Memória que melhora, a lesson waiting in Jeito; and the org's switch to let lessons in on their own, in Kit */
.proposal.lesson{background:var(--honey-wash);border-color:var(--edge-ink);transition:box-shadow .6s var(--ease)}
/* T388: Review on a lesson lands on it in Tools and lights it up for a few seconds. */
.proposal.lesson.jump{box-shadow:0 0 0 3px var(--honey)}.proposal.lesson blockquote{border-color:var(--honey)}
.proposal.lesson .ph .mono{display:block;font-size:11px;color:var(--honey-ink);letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}
.lesson-why{margin:0;font-size:13.5px;overflow-wrap:anywhere}.lesson-why em{font-style:normal;font-weight:600}
.lesson-steps summary{cursor:pointer;font-size:13px;color:var(--ink-2)}
.lesson-auto.check{display:grid;gap:2px;margin-top:12px;padding-top:6px;border-top:1px solid var(--line)}
.lesson-auto.check .help{margin:0}
p.lesson-auto{margin-top:10px}

/* Salas (F19): a roda as a room. One timeline, a line per message with who wrote it, conversations open at the side. */
a.roda{transition:background var(--dur)}
a.roda:hover,a.roda[aria-current="true"]{background:var(--paper-2)}
a.roda.big:hover{background:var(--card);box-shadow:var(--lift)}
.room{flex-direction:row}
.rmain{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.room-h .faces{margin-right:4px}
.room-h .face{width:34px;height:34px}.room-h .face .m{width:30px;height:30px}
.room-h .who{min-width:0}
.room-h .who p span{display:block}
.room .msgs{gap:0;padding:18px 20px 8px}
.rmsg{position:relative;display:flex;gap:11px;padding:6px 10px;border-radius:10px;align-items:flex-start}
/* Same author again within minutes: no face, no name, the time shows in the gutter on hover, like Slack. */
/* T187: lines of the same author stack 4px apart (2px + 2px of padding); ~22px when someone else speaks. */
.rmsg.fold{padding-top:2px}
.rmsg:not(.tail){padding-bottom:2px}
.rmsg+.rmsg:not(.fold){margin-top:10px}
.rtlog .rmsg:first-child+.rmsg{margin-top:0}
/* T335: an account card in the sala (a key refused, a window that ran out) keeps 10px from the Responder above and the line below, as a system line does (6px and 2px stuck). */
#rlog>.rsys-acct{margin:10px 0}
/* T335: the sala's caption (Sala · nome) 16px above the first bubble, near the 20px between two messages (9px stuck to it). */
#rlog>.day{margin-bottom:7px}
.rgut{width:34px;flex:none;text-align:right;font-size:10.5px;line-height:24px;color:var(--ink-3);opacity:0}
.rmsg.fold:hover .rgut{opacity:1}
/* T116: every line is a bubble. Integrantes and other people on the left, neutral; your own on the right, light terracotta. */
/* T335: Responder and the replies bar sit under the bubble, on its side, at every width (beside it, they floated). */
.rline{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:3px}
.rmsg.fold .rline{margin-top:0}
.rb{min-width:0;max-width:min(640px,100%);padding:8px 13px 6px;border-radius:18px;background:var(--paper);border:var(--edge-s);border-top-left-radius:6px}
.rmsg.fold .rb{border-top-left-radius:6px}
.rmsg:not(.tail) .rb{border-bottom-left-radius:6px}
.rmsg.mine{padding-left:55px}
.rmsg.mine .rline{align-items:flex-end}
.rmsg.mine .rb{background:var(--terra-wash);border-color:transparent;border-radius:18px;border-top-right-radius:6px}
.rmsg.mine.fold .rb{border-top-right-radius:6px}
.rmsg.mine:not(.tail) .rb{border-bottom-right-radius:6px}
.rmsg.mine .rb .btime{color:var(--terra-ink)}
.rmsg.on .rb{border-color:var(--terra)}
.rb{display:block}
.rb>.rtext{margin-top:0;min-width:0;max-width:100%}
/* T335: the time has a line of its own, at the bubble's right, in every bubble (inline it stuck to the last word). */
.rb .btime{margin:2px -5px 0 0;padding-left:0;text-align:right}
.rb.has-atts{padding:5px 5px 6px}
.rb.has-atts>.rtext{padding:4px 8px 0}
.rb.has-atts>.btime{margin-right:3px}
.rline .rbar{margin-top:0}
/* T426: the emoji on a sala line, as chips under the bubble on its side (the 1:1's .rchip): 8px from the bubble as in the 1:1, 6px apart,
   6px over the Responder or the replies bar, and 8px over a line of the same author folded under it. */
.rreacts{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px;max-width:min(640px,100%)}
.rmsg:not(.tail) .rreacts{margin-bottom:4px}
.rmsg.mine .rreacts{justify-content:flex-end}
.rmsg .mini-face{margin-top:2px}
.pav{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;margin-top:2px;background:var(--ink);color:var(--on-ink);font:600 14px/1 var(--sans)}
.rbody{min-width:0;flex:1}
.rhead{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:14px}
.rhead b{font-weight:600}
/* T335: the integrante tag is a chip of the palette (pill, ink edge, sans 700), in peri, the color between agents. */
.rhead .tag{display:inline-flex;align-items:center;align-self:center;height:20px;padding:0 8px;border-radius:99px;border:var(--edge-s);border-color:var(--edge-ink);background:var(--card);color:var(--peri-ink);font:700 11.5px/1 var(--sans);white-space:nowrap}
.rhead time{font-size:12px;color:var(--ink-3)}
.rtext{font-size:15px;line-height:1.55;white-space:pre-wrap;word-break:break-word;margin-top:2px}
.md{white-space:normal}
.md>*{margin:0 0 .6em}.md>:last-child{margin-bottom:0}
.md ul,.md ol{padding-left:1.4em}.md li+li{margin-top:.2em}
.md code{font:.88em/1.4 var(--mono,ui-monospace,monospace);background:var(--line);border-radius:5px;padding:.1em .35em;word-break:break-word}
.md pre{background:var(--line);border-radius:10px;padding:10px 12px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;overflow:visible;max-width:100%}
.md pre code{background:none;padding:0;font-size:.85em;white-space:inherit;word-break:normal;overflow-wrap:anywhere}
/* T114: a draft block wraps like the reply around it, in the app's letters, and carries Copiar (raw text) in its corner. */
.md .mdpre{position:relative;margin:.5em 0;max-width:100%}
.md .mdpre pre{padding-top:34px}
.md .mdpre.prose pre,.md .mdpre.prose pre code{font:inherit;font-size:inherit;line-height:1.55}
.md .mdcopy{position:absolute;top:6px;right:6px;z-index:1;font-family:inherit;font-weight:600;font-size:12px;line-height:1;color:var(--ink-2);background:var(--card);border:1px solid var(--line-2,var(--line));border-radius:999px;padding:6px 10px;cursor:pointer}
.md .mdcopy:hover{color:var(--ink)}
.md .mdcopy.done{color:var(--ink)}
.md a{color:var(--terra-ink);text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.md blockquote{border-left:3px solid var(--line);padding-left:10px;color:var(--ink-2)}
.md hr{border:0;border-top:1px solid var(--line)}
.md .mdt{overflow-x:auto;max-width:100%;border:var(--edge-s);border-radius:10px}
.md table{border-collapse:collapse;font-size:.92em;line-height:1.4;min-width:100%}
.md th,.md td{padding:6px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);word-break:normal;overflow-wrap:normal;hyphens:none}
/* Cells break between words, never inside one: a wide table scrolls sideways in .mdt instead of splitting "In Progress". */
.md td{min-width:5.5em;max-width:28em}
.md th{font-weight:600;background:var(--line);white-space:nowrap}
.md tbody tr:last-child td{border-bottom:0}
.md td:first-child{white-space:nowrap}
.rtext .at{font-weight:600;color:var(--terra-ink);background:var(--terra-wash);border-radius:5px;padding:0 3px}
.rbar,.rreply{display:inline-flex;align-items:center;gap:8px;margin-top:4px;border:1px solid transparent;background:transparent;border-radius:10px;padding:4px 8px 4px 4px;cursor:pointer;font-size:13px;color:var(--terra-ink)}
.rbar:hover,.rbar:focus-visible{background:var(--card);border-color:var(--line)}
.rbar small{color:var(--ink-3)}
/* T116: Responder sits at the bubble's foot, beside it when there is room and under it when not (shown on hover on a
   wide screen, always on a phone): once per message, never over the words. */
/* T335: Responder under the bubble, its word on the bubble's words' edge (13px in), on your side and on theirs. */
.rreply{flex:none;margin:0;opacity:0;color:var(--ink-3);padding:3px 13px;background:transparent}
.rmsg:hover .rreply,.rreply:focus-visible{opacity:1}
@media (hover:none){.rreply{opacity:1}} /* T273: em tela de toque larga (tablet) Responder não fica invisível e tocável */
.rreply:hover{border-color:var(--line);background:var(--card)}
.rfaces{display:inline-flex}
.cf{width:22px;height:22px;border-radius:7px;display:inline-grid;place-items:center;flex:none;margin-right:-4px;box-shadow:0 0 0 2px var(--card)}
.cf .m{width:19px;height:19px}
/* A line the room says itself sits in the message column (past the face), one quiet line; chips, if any, wrap below. */
.rsys{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;row-gap:6px;align-self:stretch;margin:2px 0;padding:3px 10px 3px 55px;color:var(--ink-3);font-size:13px;line-height:1.4}
/* T335 review 2: a system line keeps the same 10px from the messages around it as one message from the next (2px glued it to the bubble above and the name below). */
.rmsg+.rsys,.rsys+.rmsg{margin-top:10px}
.rsys>.ic{color:var(--ink-3);flex:none;width:13px;height:13px}
.rsys>span{flex:1 1 0;min-width:0}
.rsys .calls{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%}
/* T427: a member's key card in the sala, only for the person who asked: in the message column (past the face, like a
   system line), 10px from the lines around it, as wide as the 1:1 card. */
.rkey{display:flex;margin:10px 0;padding:0 10px 0 55px}
.rkey .g-ask{margin:0;max-width:min(460px,100%);width:100%}
.rkey .field{display:grid;gap:6px}
.rkey .field .help{margin:0;font-size:12.5px;line-height:1.45}
/* T427 spacing: label 6px over the field like the help under it (was 12px), the button 14px under the help (was 10px) */
.rkey .field label{margin:0}
.rkey .acts{margin-top:4px}
/* The neutral key line: icon on the first line of a two-line note, 10px to the text (the app's least breathing room; was 8), 10px above and below (was 10/12) */
.rsys.key{align-items:flex-start;column-gap:10px;margin-bottom:0}
.rsys.key>.ic{margin-top:2.5px}
.chip.call{cursor:pointer;padding:3px 10px 3px 3px}
.chip.call:hover{border-color:var(--terra);color:var(--terra-ink)}
.rwork{display:flex;align-items:center;gap:10px;margin:0 24px;min-height:0;font-size:13px;color:var(--ink-2)}
.rwork:not(:empty){min-height:34px}
.rwork .btn{margin-left:auto}
.rcomp{position:relative;align-items:flex-end}
/* T113: the roda's line grows with the text (Enter sends, Shift+Enter breaks), the clip and the send stay at its foot. */
.composer textarea.grow{display:block;resize:none;height:40px;min-height:40px;max-height:168px;padding:10px 6px;line-height:20px;overflow-y:auto;font:inherit}
.rcomp .clip{margin-bottom:1px}
.rmsg .atts{align-self:auto;justify-content:flex-start;max-width:100%;margin:0}
.rmsg.mine .atts{justify-content:flex-end}
.mpop{position:absolute;left:6px;right:6px;bottom:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:var(--card);border:var(--edge-s);border-radius:14px;box-shadow:var(--hard-s);z-index:5;max-height:240px;overflow:auto}
.mpop li{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:9px;cursor:pointer;font-size:14px}
.mpop li small{color:var(--ink-3)}
.mpop li[aria-selected="true"]{background:var(--terra-wash)}
.mpop .cf{margin-right:0}
.mpop li.all .cf{background:var(--terra-wash);color:var(--ink-2);box-shadow:none}
.rerr{margin:0 24px 6px}
.leadpick{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3);font-weight:600}
.leadpick select{width:150px;height:36px;font-size:13.5px;background-position:calc(100% - 17px) 15px,calc(100% - 12px) 15px}
.rthread{width:380px;flex:none;border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--card)}
.rthread[hidden]{display:none}
.rth{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);font-size:14px}
.rth .btn{transform:scaleX(-1)}
.rtlog{flex:1;overflow:auto;padding:12px 8px;display:flex;flex-direction:column;gap:0;min-height:0}
.rtlog .rmsg:first-child{border-bottom:1px solid var(--line);border-radius:14px 14px 0 0;padding-bottom:12px;margin-bottom:6px}
.rthread .composer{margin:8px 12px 12px}
.rthread .rwork{margin:0 12px;flex:none}
.rbar .typing{margin-left:2px}
@media (max-width:1100px){
  .rthread{position:absolute;top:0;right:0;bottom:0;width:min(380px,100%);box-shadow:none;border-left:var(--edge);z-index:6}
  .room{position:relative}
}
@media (max-width:760px){
  .room-h .faces{display:none}
  .room-h .who h1{font-size:20px}
  .room-h .who p{white-space:nowrap}
  .leadpick span{display:none}
  .leadpick select{width:118px}
  .room .msgs{padding:10px 6px 6px}
  .rmsg{padding:5px 8px;gap:10px}
  .rmsg.fold{padding-top:2px}
  .rmsg:not(.tail){padding-bottom:2px}
  .rreply{opacity:1;padding:3px 6px;font-size:12.5px}
  .rmsg.mine{padding-left:52px}
  .rsys{padding-left:52px}
  .rkey{padding:0 8px 0 52px}
  #rlog>.day{margin-bottom:8px}
  .rwork{margin:0 12px}
  .rerr{margin:0 12px 6px}
  .rthread{width:100%;border-left:0;box-shadow:none}
  .rth .btn{transform:none}
}
/* T17: Conexões de modelo. The MCP connection card, with the state on the right and three facts under the name. */
.mconn .mc-name{min-width:0}
.mconn .mc-name b{overflow-wrap:anywhere}
.mc-st{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-sm);padding:4px 10px;border-radius:999px;background:var(--paper);white-space:nowrap}
.mc-st[data-st="expired"],.mc-st[data-st="refused"]{background:var(--terra-wash)}
.mc-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0}
.mc-kv div{background:var(--paper);border-radius:12px;padding:8px 12px;min-width:0}
.mc-kv dt{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.mc-kv dd{margin:2px 0 0;font-size:var(--t-sm);overflow-wrap:anywhere}
.mc-kv dd small{display:block;color:var(--ink-3);font-size:12px}
.mc-use{margin-top:10px;background:var(--paper);border-radius:12px;padding:10px 12px;min-width:0}
.mc-use>p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0;font-size:var(--t-sm)}
.mc-use>p small{color:var(--ink-3);font-size:12px}
.mc-use>p b{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;font-weight:500}
.mc-uselink{display:inline-block;margin-top:4px;font-size:var(--t-sm)}
.mc-uws{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 16px;margin-top:8px}
.mc-uh{display:flex;justify-content:space-between;gap:8px;font-size:var(--t-sm)}
.mc-ubar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:4px 0}
.mc-ubar i{display:block;height:100%;border-radius:inherit;background:var(--moss)}
.mc-ubar[data-hi="1"] i{background:var(--honey)}
.mc-ubar[data-hi="2"] i{background:var(--terra)}
.mc-uw small{color:var(--ink-3);font-size:12px}
.mc-tested{color:var(--ink-3);font-size:12.5px}
.mc-res{margin:0;font-size:var(--t-sm);padding:8px 12px;border-radius:12px;background:var(--sage-wash)}
.mc-res[data-res="refused"],.mc-res[data-res="expired"]{background:var(--terra-wash)}
.mc-res[data-res="inconclusive"]{background:var(--honey-wash)}
@media (max-width:620px){.mc-kv{grid-template-columns:1fr}.mc-act .btn{flex:1 1 auto;justify-content:center}}
/* The chat header on a phone: name and model chip stacked beside the face, Crachá an icon at the right; nothing leaves the screen.
   The room header keeps its own row. Desktop is untouched. */
@media (max-width:760px){
  /* T351: one row; the model chip keeps the mark and the model at the right, before Crachá (the effort is in its menu). */
  .chat-h:not(.room-h){display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto auto;grid-template-areas:"back av who find model badge";column-gap:10px;row-gap:6px;align-items:center}
  .chat-h:not(.room-h) .find-btn{grid-area:find}
  /* T197: with the lupa in the row, a phone has no room for the model's words next to the name: up to 440px the chip
     shows the engine's mark only (the model is in its title, its aria-label and the menu it opens), so the name keeps its width. */
  @media (max-width:440px){.chat-h:not(.room-h) .pill.model-pill{padding:6px 9px;gap:0;width:38px;justify-content:center}.chat-h:not(.room-h) .model-pill .mlabel,.chat-h:not(.room-h) .model-pill>.ic:last-child{display:none}}
  .chat-h:not(.room-h) .back{grid-area:back}
  .chat-h:not(.room-h) .av{grid-area:av}
  .chat-h:not(.room-h) .who{grid-area:who;min-width:0}
  .chat-h:not(.room-h) .who h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
  .chat-h:not(.room-h) .who p{display:flex;gap:8px}
  .chat-h:not(.room-h) .model-pick{grid-area:model;justify-self:end;min-width:0;max-width:100%}
  .chat-h:not(.room-h) .pill.model-pill{max-width:100%}
  .chat-h:not(.room-h) .model-pill .meff{display:none}
  @media (max-width:420px){.chat-h:not(.room-h) .pill.model-pill{gap:4px;padding:6px 8px;font-size:12px}}
  .chat-h:not(.room-h) .badge-btn{grid-area:badge;width:38px;padding:0;justify-content:center}
  .chat-h:not(.room-h) .badge-btn .bl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* Times da org (T10): one card per team, its faces, who is on it, rename in place and delete through a dialog. */
.tnew{grid-template-columns:1fr auto}
.team-card{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:var(--card);border:var(--edge-s);border-radius:16px;padding:12px 14px}
.team-card .faces{min-width:38px;padding-right:8px}
.team-card .face{width:38px;height:38px}.team-card .face .m{width:32px;height:32px}
.team-card .tn{flex:1;min-width:0}
.team-card .tn b{display:block;font:800 18px/1.25 var(--serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-card .tn small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px}
.team-card .tre{height:38px}
.team-card .tacts{display:flex;gap:6px;flex:none}
.team-card .rm{color:var(--ink-3)}.team-card .rm:hover{color:var(--danger)}
.dlg .faces{padding-right:8px}
/* T33: who is on the team, one button each: move or take off the team. */
.team-card .tmembers{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:2px 0 0;padding:10px 0 0;border-top:1px solid var(--line)}
.team-card .tmem{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:3px 12px 3px 3px;border:var(--edge-s);border-radius:999px;background:var(--paper);color:var(--ink);font:500 13.5px/1.2 var(--sans);cursor:pointer}
.team-card .tmem:hover{border-color:var(--ink-3)}
.team-card .tmem .face{width:28px;height:28px;margin:0;box-shadow:none}.team-card .tmem .face .m{width:24px;height:24px}
.dlg #tmemto{margin:6px 0 12px}
.dlg #tmove{margin:6px 0 12px}
.dlg .dlg-note{font-size:13px;color:var(--ink-3)}
@media (max-width:640px){
  .tnew{grid-template-columns:1fr}
  .team-card{flex-wrap:wrap}
  .team-card .faces .face:nth-child(n+3){display:none}
  .team-card.editing .tn{flex:1 1 calc(100% - 62px)}
  .team-card.editing .tacts{margin-left:auto}
}
#toteams{margin-left:auto}
/* T18: accounts by provider. A key sits on honey with the key, a subscription on sage with the person, the same two
   colors on the card, the account page and the add form, so the kind reads before the words. */
.ktag,.dtag{display:inline-flex;align-items:center;gap:5px;font:600 11.5px/1 var(--sans);padding:4px 8px;border-radius:999px;white-space:nowrap;vertical-align:middle}
.ktag[data-kind="api_key"]{background:var(--honey-wash);color:var(--honey-ink);border:var(--edge-s)}
.ktag[data-kind="oauth"]{background:var(--sage-wash);color:var(--rabbit-ink);border:var(--edge-s)}
.dtag{background:var(--peri-wash);color:var(--peri-ink);border:var(--edge-s)}
.conn-h .kic[data-kind="api_key"]{background:var(--honey-wash);color:var(--honey-ink)}
.conn-h .kic[data-kind="oauth"]{background:var(--sage-wash);color:var(--rabbit-ink)}
.mconn .mc-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
.mc-open{display:inline-flex;align-items:center;gap:4px;color:var(--ink);text-decoration:none;border-radius:8px}
.mc-open:hover b,.mc-open:focus-visible b{text-decoration:underline;text-underline-offset:3px}
.klegend{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:baseline;gap:8px 12px;max-width:var(--col);margin:0 0 22px;font-size:var(--t-sm);color:var(--ink-2)}
.klegend p{display:contents}
.klegend .ktag{justify-self:start}
/* T121: a provider's name and how many accounts it has read as one label, close over its cards; providers apart. */
.mprov{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--track)),1fr));gap:14px}
.mprov>*{min-width:0}.mprov>.mprov-h,.mprov>.mprov-none{grid-column:1/-1}
.mprov+.mprov{margin-top:26px}
.mprov-h{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap}
.mprov-h h2{margin:0;font:800 20px/1.2 var(--serif)}
.mprov-h small{color:var(--ink-3);font-size:12.5px}
.mprov-n{color:var(--ink-2);font-size:12.5px;font-weight:600;padding:1px 9px;border-radius:999px;background:var(--paper);border:var(--edge-s)}
.mprov-none{margin:0;display:flex;align-items:center;min-height:72px;padding:16px 18px;background:var(--card);border:var(--edge-s);border-radius:18px;color:var(--ink-3);font-size:var(--t-sm)}
/* T40: the page is the scroller and takes the whole pane, like every inside screen; its blocks keep the --col of every page. */
.acct>:not(.pane-h,.lede){max-width:var(--read)}
.acct-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 8px}
.acct-box{background:var(--card);border:var(--edge-s);border-radius:18px;padding:16px 18px;margin-top:14px;display:grid;gap:8px}
.acct-box h3{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--t-md,16px)}
.acct-box .help,.acct-box p{margin:0}
.acct-box .actions{margin:0}
.acct-box.danger{border-color:var(--edge-ink)}
.acct-confirm{background:var(--terra-wash);border-radius:14px;padding:12px 14px;display:grid;gap:10px}
.kopts{border:0;padding:0;margin:0;display:grid;gap:10px}
.kopts legend{font-weight:600;margin-bottom:8px}
.kopts .kopt{display:flex;gap:10px;align-items:flex-start;margin:0;font:400 var(--t-sm)/1.4 var(--sans);color:var(--ink);background:var(--card);border:var(--edge-s);border-radius:14px;padding:12px 14px;cursor:pointer}
.kopt:has(input:checked){border-color:var(--ink-3);box-shadow:0 0 0 2px var(--paper-2)}
.kopt input{accent-color:var(--terra);margin-top:3px}
.kopt > span{display:grid;gap:6px;justify-items:start}
.kopt small{color:var(--ink-2);font-size:var(--t-sm)}
.gwopt{display:grid;margin:4px 0 12px}
.kit-acct{display:grid;gap:6px;margin-top:12px}
.kit-acct label{font-size:var(--t-sm);font-weight:600}
.kit-acct .formerr:empty{display:none}
@media (max-width:620px){
  .mprov-h small{flex-basis:100%;order:3}
  .acct-box .actions .btn{flex:1 1 auto;justify-content:center}
}

/* Mesas da org (T11): same cards as Times, a Trazer alguém button, and the seletor's who-is-here inside the dialog. */
.sub-h{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.sub-h .sub{flex:1}
.sub-h #tomesas{margin-bottom:4px}
.mesa-card .tacts .btn{white-space:nowrap}
/* T380: "Add someone" sits next to 38px icon buttons; same height, same axis */
.mesa-card .tacts .btn.sm{height:38px}
/* T11b: a mesa's name is never cut; it wraps, and on a phone the buttons go to their own line under it. */
.mesa-card .tn b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.dlg #mwho{margin:6px 0 12px}
.dlg .mesa-who{margin:0 0 12px}
/* T304: the two notes under the grid share the lede's left edge (no .hint side padding) and sit on the spacing scale: 20px from the cards, 12px between them. */
.mesa-alone,.mesa-bare{padding:0}
.mesa-alone{margin-top:var(--s5)}
.mesa-bare{margin-top:var(--s3)}
.dlg .mesa-own h3{margin:0 0 10px;font-size:var(--t-md,17px);overflow-wrap:anywhere}
.dlg .mesa-own .dlg-warn{background:var(--honey-wash);border:var(--edge-s);border-radius:14px 14px 14px 4px;padding:10px 12px;color:var(--ink);margin:0 0 10px;text-wrap:pretty}
@media (max-width:640px){
  .mesa-card .tn{flex:1 1 calc(100% - 62px)}
  .mesa-card .tacts{flex:1 1 100%;justify-content:flex-end}
}

/* Rodas editáveis (T12): the admin's pen and delete beside each roda, the editor dialog with chips, and the archived list. */
.hacts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
/* T120: the row is the card, so the pen and the delete sit inside it on the right, and the card keeps the column's edges. */
.roda-row{display:flex;align-items:center;gap:8px;padding-right:12px;background:var(--card);border:var(--edge-s);border-radius:18px;transition:box-shadow var(--dur)}
.roda-row>a.roda{flex:1;min-width:0}
/* T367: a sala alone in the grid (a member who sees one) takes the whole row, not half of it with the other half empty. */
body[data-view="rodas"] .page .cards>:only-child{grid-column:1/-1}
/* T307: two salas side by side keep the name on the same line: the card fills the row and its content starts at the top */
.roda-row>a.roda.big{align-self:stretch;align-items:flex-start}
.roda-row>a.roda.big{border:0;background:none;border-radius:17px 0 0 17px}
.roda-row>a.roda.big:hover{background:none;box-shadow:none}
.roda-row:has(>a.roda:hover){box-shadow:var(--lift)}
.roda-row .tacts{display:flex;gap:6px;flex:none}
.roda-row .rm{color:var(--ink-3)}.roda-row .rm:hover{color:var(--danger)}
.roda .rt{min-width:0}
.roda.big .rt small.rdesc{display:block;color:var(--ink-2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.roda.arch{opacity:.85}
.rdlg{width:min(560px,calc(100vw - 32px))}
.rdlg .lbl{display:block;margin:12px 0 6px}
.rdlg textarea.input{resize:vertical;min-height:58px;font:inherit}
.rdlg .gchips{margin-bottom:6px}
.rdlg .gchip{display:inline-flex;align-items:center;gap:6px}
.rdlg .gchip .cf{width:20px;height:20px;margin-right:0;box-shadow:none}
.rdlg .gchip .cf .m{width:18px;height:18px}
.rdlg .rteams .gchip{border-style:dashed}
.rdlg .dlg-note{font-size:13px;color:var(--ink-3);margin:4px 0 0}
/* T224: the independent switch reads like the other fields: its name in .lbl above, left aligned; the switch says only the state.
   Its focus ring is the app's (2.5px terracota, offset 2px), the same one the dialog's buttons wear. */
.rdlg .rindep{display:grid}
.rdlg .rindep .netsw{text-align:left}
.rdlg .rindep .netsw b{font-weight:600;white-space:nowrap}
.rdlg .rindep .netsw:focus-visible{outline:3px solid var(--peng);outline-offset:2px}
@media (max-width:640px){
  .pane-h .hacts{width:100%;justify-content:flex-start}
  .roda-row{align-items:stretch;padding-right:12px}
  .roda-row .tacts{flex-direction:column;justify-content:center}
}

/* Slack, one app per integrante (T20): who goes to Slack, then the steps for that one. */
.sl-warn{list-style:none;margin:0 0 18px;padding:12px 14px;display:grid;gap:6px;max-width:var(--col);background:var(--honey-wash);border:var(--edge-s);border-radius:14px;font-size:var(--t-sm);color:var(--ink-2)}
.sl-warn .sl-warn-h{display:block;font-weight:600;color:var(--honey-ink);font-size:var(--t-xs,12px);text-transform:uppercase;letter-spacing:.04em}
.sl-warn li{display:flex;gap:10px;align-items:flex-start;text-wrap:pretty}.sl-warn .ic{flex:none;margin-top:2px;color:var(--honey-ink)}
.sl-h{font-size:var(--t-md, 16px);margin:6px 0 10px}
.sl-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-bottom:16px}
.sl-ag{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 7px;border-radius:14px;border:var(--edge-s);background:var(--card);color:var(--ink);font:inherit;text-align:left;min-height:44px;cursor:pointer}
.sl-ag[aria-checked="true"]{border-color:var(--terra);box-shadow:0 0 0 2px var(--terra-wash)}
.sl-ag:focus-visible{outline:3px solid var(--peng);outline-offset:2px}
.sl-ag .av,.sl-done .av{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;overflow:hidden;flex:none}
.sl-ag .av .m{width:28px;height:28px}.sl-done .av.big{width:44px;height:44px;border-radius:14px}.sl-done .av.big .m{width:42px;height:42px}
.sl-ag .nm{display:grid}.sl-ag b{font-size:var(--t-sm)}.sl-ag small{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3)}
/* T397/T359: the Slack page takes the column like every page; the setup steps stay reading blocks at --read. */
.sl-panel{max-width:none}
.sl-stage{max-width:var(--col);margin:0 0 30px}
.sl-stage :is(.sl-ways,.sl-steps,.sl-cfg-steps,.sl-way-note){max-width:var(--read)}
.sl-stage+.sl-stage{padding-top:26px;border-top:1px solid var(--line)}
.sl-h.sl-stage-h{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.sl-stage-h .n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--on-ink);font:600 13px/1 var(--sans)}
.sl-ways{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 14px;align-items:stretch}
.sl-way{padding:20px 22px;font:inherit;color:inherit;text-align:left;cursor:pointer;border:1.5px solid var(--line);transition:border-color .15s,box-shadow .15s,opacity .15s}
.sl-way[aria-checked="false"]{opacity:.72}
.sl-way[aria-checked="false"]:hover{opacity:1;border-color:var(--ink-3)}
.sl-way[aria-checked="true"]{border-color:var(--terra);box-shadow:0 0 0 3px var(--terra-wash);opacity:1}
.sl-way:focus-visible{outline:3px solid var(--peng);outline-offset:2px}
.sl-way-h{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:6px;align-items:center}
.sl-way-h .kic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--sky-wash);color:var(--ink)}
.sl-man .kic{background:var(--sage-wash)}
.sl-way-h b{grid-column:1/-1;font-size:var(--t-md, 16px);margin-top:6px}
.sl-way-h small{grid-column:1/-1;color:var(--ink-2);font-size:var(--t-sm);line-height:1.5;text-wrap:pretty}
.sl-tag{justify-self:start;font:600 11.5px/1 var(--sans);padding:5px 9px;border-radius:999px;background:var(--terra-wash);color:var(--ink)}
.sl-stage .sl-warn{margin:0}
.sl-cfg-steps{margin-bottom:12px}
.sl-stage .sl-form{margin-top:14px}
.sl-hint{color:var(--ink-3);font-size:var(--t-sm)}
.sl-way-note{margin:-4px 0 14px}
.sl-ag .sl-way-tag{display:inline-block;font-size:10.5px;padding:3px 7px;margin-left:4px;vertical-align:1px}
.sl-way-tag.sl-way-auto{background:var(--sky-wash)}.sl-way-tag.sl-way-manual{background:var(--sage-wash)}
.sl-switch{align-items:center;margin-top:14px}
.sl-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sl-step{display:flex;gap:12px;background:var(--card);border:var(--edge-s);border-radius:16px;padding:14px 16px}
.sl-step .n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sky-wash);font:600 13px/1 var(--sans)}
.sl-step>div{display:grid;gap:6px;min-width:0;flex:1}
/* T422: a step's button sits 12px under its paragraph, not 8 */
.sl-steps:not(.sl-ev-steps) .sl-step>div>.conn-setup-a{margin-top:6px}
.sl-p{margin:0;color:var(--ink-2);font-size:var(--t-sm);text-wrap:pretty;overflow-wrap:anywhere}
.sl-json{max-height:320px;overflow:auto;white-space:pre;word-break:normal}
.sl-form{display:grid;gap:6px;max-width:520px}.sl-form .help{margin:0 0 6px}.sl-form .btn.main{justify-self:start}
/* T422: the error by the button that failed, 14px from the help above and from the button below */
.sl-form .sl-near{margin:2px 0 8px}.sl-near{max-width:var(--read)}
.sl-done .linkbox{margin-top:0}
/* T405: an app from before the members followed threads. Honey, as every notice; its steps keep the card colour. */
.sl-ev{margin-bottom:var(--s4);gap:var(--s4);background:var(--honey-wash)}
.sl-ev .conn-h{flex-wrap:nowrap;align-items:flex-start}.sl-ev .conn-h>div{flex:1 1 0;min-width:0;text-wrap:pretty}
.sl-ev .conn-h .kic{background:var(--card);border:var(--edge-s);color:var(--honey-ink)}
.sl-ev .conn-h small{color:var(--ink-2);font-size:var(--t-sm);margin-top:var(--s1);max-width:var(--measure)}
/* the title's line sits on the 38px icon's axis */
.sl-ev .conn-h>div{padding-top:8px}
.sl-ev-auto,.sl-ev-done{display:grid;justify-items:start;gap:var(--s3)}
.sl-ev-auto .help,.sl-ev-done .help{margin:0;color:var(--ink-2);max-width:var(--measure)}
/* T404: the closing note reads like the steps above it: their width and their text size */
.page:not(.board,.onb) .sl-ev :is(.sl-ev-auto,.sl-ev-done) p.help{max-width:none;font-size:var(--t-sm)}
.sl-ev .conn-tech{margin-top:0;max-width:none}.sl-ev .conn-tech[open]>summary{margin-bottom:var(--s3)}
.sl-ev-steps .conn-setup-a{margin-top:0}
/* T405 review: the notice is a reading block. The card, its opening text, the steps and the closing line all end on
   --read, so nothing stops short of the card's edge (the lines inside a step keep --measure, as every reading block's);
   the closing button sits 24px under the last step, its note 16px
   under it, and the card closes 24px under the note */
.sl-ev{max-width:var(--read);padding-bottom:var(--s6)}
.sl-ev .conn-h small,.sl-ev-steps{max-width:none}
.sl-ev-auto,.sl-ev-done{margin-top:var(--s2);gap:var(--s4)}
/* phone: the text in the card's whole width; buttons fill it like the steps' */
@media (max-width:760px){
  /* T404: the icon beside the title (not alone on a row above it), the text under both in the card's whole width */
  .sl-ev .conn-h{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:12px;row-gap:var(--s3);align-items:center}
  .sl-ev .conn-h>div{display:contents}.sl-ev .conn-h small{grid-column:1/-1;margin-top:0}
  .sl-ev-auto .btn,.sl-ev-done .btn{width:100%;justify-content:center}
}
.sl-ev .sl-p code{font:500 12.5px/1.4 var(--mono);background:var(--paper-2);border-radius:6px;padding:1px 6px;white-space:nowrap}
.sl-onl .sl-old{grid-column:2/-1;justify-self:start;margin-top:var(--s1);display:flex;align-items:center;gap:var(--s2);font-size:12.5px;font-weight:600;color:var(--honey-ink);text-decoration:none;white-space:nowrap}
.sl-onl .sl-old:hover{text-decoration:underline}
/* three lines: the face sits on the name's top edge, not between the first two lines */
.sl-onl>.conn-ag:has(.sl-old) .av{align-self:start}
/* T403: the reauthorize card is this card (.sl-ev.sl-files). In both: 10px from a button's icon to its text, and a
   step's title on the 28px number's axis, not on its top edge */
.sl-ev .btn{gap:10px}
.sl-ev-steps .sl-step>div>b{padding-top:4px}
.sl-team{margin-top:14px;display:grid;gap:12px}
/* T404: the sun stays beside the title on the phone too, not alone above it */
.sl-team .conn-h{flex-wrap:nowrap;align-items:flex-start}.sl-team .conn-h>div{flex:1 1 0;min-width:0;text-wrap:pretty}.sl-team .sl-p a{font-weight:600;white-space:nowrap}
.sl-daily{display:grid;gap:6px;max-width:var(--read)}.sl-daily .help{margin:0}
.sl-daily-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.sl-daily-row .input{width:auto;min-width:0;flex:0 1 140px}
/* T397: who talks to the member in Slack without a Trupe account. The four ways are the DS choice cards; the lists of
   channels and people are chips that wrap between chips; each person who talked is a row with their state on the right. */
#sl-acc-box[hidden]{display:none}
.sl-access{margin-top:var(--s4);gap:var(--s4)}
.sl-acc-form{display:grid;gap:var(--s4);max-width:var(--read);background:none;border:0;border-radius:0;padding:0}
.sl-acc-modes{border:0;margin:0;padding:0;min-width:0;display:grid;gap:var(--s2)}
.sl-acc-modes legend{padding:0;margin-bottom:var(--s2)}
.sl-acc-form .help,.sl-acc-form .note{margin:0}
/* Salvar keeps the form's 16px rhythm (the row's own 2px made it 18) */
.sl-acc-form .conn-setup-a{margin-top:0}
/* on the phone the people icon stays beside the title, not alone above it */
.sl-access .conn-h{flex-wrap:nowrap;align-items:flex-start}.sl-access .conn-h>div{flex:1 1 0;min-width:0;text-wrap:pretty}
/* the key sits on the axis of the note's first line (21px line, 15px icon) */
.sl-acc-note .ic{margin-top:3px;flex:none}
.sl-acc-picks{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.sl-acc-pick{display:grid;gap:var(--s2);align-content:start;min-width:0}
.sl-acc-pick-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:30px}
.sl-acc-pick-h .lbl{margin:0}
.sl-acc-chips{max-height:220px;overflow:auto;padding:var(--s1) 0}
.sl-acc-grp{display:grid;gap:var(--s3);padding-top:var(--s4);border-top:1px solid var(--line)}
.sl-acc-sh{font:700 var(--t-sm)/1.3 var(--sans);margin:0}
.sl-acc-grp .sl-p{margin:0}
.sl-guests{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.sl-guest{border:var(--edge-s);border-radius:var(--r2);padding:var(--s3) var(--s4);display:grid;gap:var(--s2);background:var(--card);min-width:0}
.sl-guest.sl-ask{background:var(--honey-wash)}
.sl-guest-h{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.sl-guest-w{display:grid;gap:var(--s1);flex:1 1 180px;min-width:0;overflow-wrap:anywhere}
.sl-guest-w small{font-size:12.5px;color:var(--ink-3)}
.sl-guest-h .chip{min-height:30px}
.sl-ask-a{display:flex;gap:var(--s2);flex-wrap:wrap}
.sl-guest-q,.sl-guest-a{margin:0;font-size:var(--t-sm);color:var(--ink-2);overflow-wrap:anywhere;max-width:var(--measure)}
.sl-guest-a{color:var(--ink)}
.sl-guest-t summary{cursor:pointer;font-size:var(--t-sm);font-weight:600;color:var(--ink-2)}
.sl-guest-t ol{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:var(--s3)}
.sl-guest-t li{display:grid;gap:var(--s1);padding-top:var(--s3);border-top:1px solid var(--line)}
.sl-guest-t li small{font-size:12px;color:var(--ink-3)}
@media (max-width:640px){.sl-acc-picks{grid-template-columns:1fr}
  /* on the phone the waiting message is read before Aprovar / Recusar, not under them */
  .sl-ask .sl-guest-h{display:contents}.sl-ask .sl-ask-a{order:1;margin-top:var(--s1)}}
/* T241: the @Trupe app. Who leads it sits above its way in; the name select takes the room a name needs. */
.sl-org-intro{margin-bottom:12px}.sl-lead{display:grid;gap:10px;margin-bottom:14px}.sl-lead .sl-daily-row .input{flex:1 1 220px;max-width:320px}
@media (max-width:760px){
  .sl-ag{flex:1 1 calc(50% - 8px);min-width:0}
  .sl-ways{grid-template-columns:1fr}.sl-way{padding:16px}.sl-stage{margin-bottom:24px}
  .sl-step{padding:12px;gap:10px}
  .sl-form .btn.main,.sl-step .conn-setup-a .btn{width:100%;justify-content:center}
}

/* T12 polish: a roda's name wraps to two lines instead of being cut; an archived roda says so in a full line above its disabled composer. */
.roda.big .rt b{white-space:normal;overflow-wrap:anywhere;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rarch-note{display:flex;align-items:flex-start;gap:8px;margin:8px 22px 0;padding:9px 12px;border-radius:12px;background:var(--paper-2);color:var(--ink-2);font-size:13.5px;line-height:1.35}
.rarch-note svg{flex:none;margin-top:1px}
@media (max-width:640px){.rarch-note{margin:6px 10px 0}}

/* T30: Modelos e chaves. One page, two blocks: Modelos (a card per connection) and Chaves de sistemas. No button row
   on top: each block carries its own action. Adicionar modelo is a dialog that asks the type first. */
.vault .vblk{max-width:var(--col);margin-top:28px}
.vault .vblk+.vblk{margin-top:36px;padding-top:26px;border-top:1px solid var(--line)}
/* T121: the block's action sits on the title's line at the column's right edge; the description runs under both, the whole column. */
.vblk-h{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;margin-bottom:var(--s4)}
.vblk-h>div{display:contents}
.vblk-h h2{grid-column:1;grid-row:1;margin:0;font:800 26px/1.15 var(--serif)}
.vblk-h p{grid-column:1/-1;grid-row:2;margin:6px 0 0;color:var(--ink-2);font-size:var(--t-sm)}
.vblk-h>.btn{grid-column:2;grid-row:1}
.vault .mprov-h h3{margin:0;font:800 18px/1.2 var(--serif)}
.vault .vblk .cards{margin-top:0}
.keyrow .kname{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.keyrow .kname b{overflow-wrap:anywhere}
.ktag[data-kind="key"]{background:var(--paper);color:var(--ink-2);border:var(--edge-s)}
.ktag[data-kind="login"]{background:var(--peri-wash);color:var(--peri-ink);border:var(--edge-s)}
.ktag[data-kind="managed"]{background:var(--sky-wash);color:var(--ink-2);border:var(--edge-s)}
.ktag[data-kind="guest"]{background:var(--honey-wash);color:var(--honey-ink);border:var(--edge-s)}
.keyrow small .kguest{display:block;color:var(--ink-2)}
/* T427: a key no member receives says so on its card, in the warning's ink, above the date. */
.keyrow small .korphan{display:block;color:var(--honey-ink);font-weight:600}
#krel .kl-set{border:0;margin:0;padding:0;min-width:0;display:grid;gap:var(--s2)}
#krel .kl-set legend{padding:0;margin-bottom:var(--s2)}
/* T427 spacing: the intro 14px over the choices, the button 14px under the chips, no empty error line at the bottom (was 32px) */
#krel>.help{margin:0 0 6px}
#krel>.actions{margin-top:6px}
#krel>.formerr:empty{display:none}
/* T58: a key row opens on its detail (admin); T57: Slack's pieces fold into one line that opens in place. */
a.keyrow{color:inherit;text-decoration:none;cursor:pointer;transition:border-color .15s var(--ease)}
a.keyrow:hover,details.keygroup>summary.keyrow:hover{border-color:var(--ink-3)}
a.keyrow:focus-visible,details.keygroup>summary:focus-visible{outline:3px solid var(--peng);outline-offset:2px}
.keyrow .kgo{color:var(--ink-3);display:grid;place-items:center;flex:none}
/* T346: Slack's group in the Cofre wears its mark in the same white tile as on Conexões. */
.keyrow .kic.logo{background:var(--logo-tile)}
.keyrow .kic.logo .ic{width:22px;height:22px}
.keyrow .kgo .ic{width:16px;height:16px;transition:transform .2s var(--ease)}
/* T378: a card of the Cofre's grid (--track wide) stacks its lines: name and tag on top, the status under them, so the
   status gets the card's whole text width (two lines at most) and a tag that does not fit beside the name drops under it,
   never over the status. Icon and chevron sit on the card's middle. Slack's group is a group that opens on its pieces:
   it takes the whole row. */
.vault .cards .keyrow{display:grid;grid-template-columns:38px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:var(--s3);row-gap:var(--s2);align-items:center;padding:var(--s4)}
.vault .cards .keyrow>.kic{grid-column:1;grid-row:1/-1}
.vault .cards .keyrow>.kname{grid-column:2;grid-row:1;align-self:end;gap:var(--s1) var(--s2)}
.vault .cards .keyrow>small{grid-column:2;grid-row:2;align-self:start;margin:0;line-height:1.4;text-wrap:pretty}
.vault .cards .keyrow>.kgo{grid-column:3;grid-row:1/-1}
.vault .cards .keyrow .ktag{flex:none}
.vault .cards>.keygroup{grid-column:1/-1}
.vault .cards .add-key{background:transparent;border:1.5px dashed var(--line-2);color:var(--ink)}
.vault .cards .keyrow>.kname>b{line-height:21.5px}  /* the height of a tag: every card of the grid, the Save key one and Slack's, is as tall */
.vault .cards .add-key .kic{background:var(--bear-w);border:1.5px dashed var(--edge-ink);color:var(--terra-ink)}
.vault .cards .add-key:hover{border-color:var(--ink-3);border-style:solid}
/* T378: the open group keeps the card's 16px edge, and each piece is its own line with air and a hairline between them. */
.vault .keygroup-b{padding:var(--s4);gap:var(--s3)}
.vault .kpieces{gap:0}
.vault .kpieces li{padding:var(--s2) 0}
.vault .kpieces li+li{border-top:1px solid var(--line)}
.vault .keygroup-b .actions{margin-top:var(--s1)}
details.keygroup>summary{list-style:none;cursor:pointer}
details.keygroup>summary::-webkit-details-marker{display:none}
details.keygroup[open]>summary .kgo .ic{transform:rotate(90deg)}
details.keygroup[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.keygroup-b{background:var(--card);border:var(--edge-s);border-top:0;border-radius:0 0 16px 16px;padding:12px 14px;display:grid;gap:10px}
.keygroup-b .help,.keygroup-b .actions{margin:0}
.kpieces{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.kpieces li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:12.5px;color:var(--ink-3)}
.kpieces li b{overflow-wrap:anywhere;color:var(--ink-2)}
/* T401: the named keys in the Cofre, one group per type with its count; each card says the key's name, who uses it
   and who saved it when. The groups and Outras chaves are --s8 apart, the title --s3 above its grid. */
.vault .vk-kh{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);margin:0 0 var(--s3)}
.vault .vk-kh h3{margin:0;font:800 var(--t-lg)/1.2 var(--serif);letter-spacing:-.02em}
.vault .vk-kind+.vk-kind,.vault .vk-kind+.vk-kh{margin-top:var(--s8)}
.vault .cards .vkrow>.kname{flex-direction:column;align-items:flex-start;gap:var(--s1)}
/* T401 review: in a row of named keys the names share one line: the text starts at the top of every card (a scope in two
   lines grows downward instead of pushing its name up), the icon and the arrow stay centred on the card. */
.vault .cards .vkrow{grid-template-rows:auto 1fr}
.vault .cards .vkrow>.kname{align-self:start}
.vault .vk-scope{font-size:var(--t-sm);line-height:1.4;color:var(--ink-2);text-wrap:pretty}
/* T401: the key link's choices (new key or one to replace; who uses it) and the key's own page. */
.keylink .kl-set,.vkacct .kl-set{border:0;margin:0;padding:0;min-width:0;display:grid;gap:var(--s2)}
.keylink .kl-set legend,.vkacct .kl-set legend{padding:0;margin-bottom:var(--s2)}
.keylink .kl-new{display:grid;gap:18px}
.keylink .choices{gap:var(--s3)}
.keylink .kl-who{margin-bottom:calc(var(--s6) - 18px)}  /* with the form's 18px gap, --s6 to the first choice */
.keylink .kl-vals{display:grid;gap:18px;padding-top:var(--s6);border-top:1px solid var(--line)}
.vault .vblk-h+.vk-kind{margin-top:var(--s6)}
.vault .cards .vkrow{row-gap:var(--s1)}
.vkacct .acct-box{margin-top:var(--s6);padding:var(--s5) var(--s6);gap:var(--s3)}
.vkacct .pane-h+.acct-tags{margin-top:0}
.vkacct .formerr:empty,.vkacct #vkdone:empty{display:none}
@media (max-width:760px){.vkacct .acct-box{margin-top:var(--s4);padding:var(--s4)}}
.keylink .kl-repl{margin:0;padding:var(--s3) var(--s4);background:var(--d-yel);border:var(--edge-s);border-radius:var(--r2);color:var(--ink)}
/* T401 review: the yellow note hugs its line instead of a half-width box wrapped in three. */
.page.keylink:not(.board,.onb) .form p.kl-repl.help{width:fit-content;max-width:100%}
.keylink .choice small,.vkacct .choice small{text-wrap:pretty;overflow-wrap:anywhere}
/* T401 review: the picked card's 2px edge (1.5px on the others) took half a pixel off its padding, so its radio sat off the
   column of the other radios; the padding gives it back. */
.keylink .choice.on,.vkacct .choice.on{padding:11.5px 13.5px}
.vkacct .vk-vars{display:flex;flex-wrap:wrap;gap:var(--s2)}
/* T401 review: a member chip on the key page reads its face, then its name, 10px apart (.cf's -4px is for stacked faces). */
/* T401 review 2: the member chips carry a face (36px tall); at the global 6px their rows touched in 390. */
.vkacct .gchips{gap:var(--s2)}
.vkacct .gchip{display:inline-flex;align-items:center;gap:10px}
.vkacct .gchip .cf{margin-right:0}
.vkacct .vk-vars code{font:600 12.5px/1.4 var(--mono);padding:var(--s1) var(--s2);background:var(--paper);border:var(--edge-s);border-radius:8px;overflow-wrap:anywhere}
.vkacct #vkscope{margin-top:var(--s3);padding-top:var(--s4);border-top:1px solid var(--line);gap:var(--s4)}
.vkacct h1{overflow-wrap:anywhere}
.keyacct h1.mono-n{font-size:clamp(18px,4vw,26px);overflow-wrap:anywhere}
.mdlg{width:min(520px,calc(100vw - 24px))}
.mdlg-in{display:grid;gap:12px}
.mdlg-in h2{margin:0}
.mdlg-in>p{margin:-4px 0 4px}
.mtypes{display:grid;gap:12px}
.mtype{display:flex;align-items:center;gap:12px;text-align:left;width:100%;background:var(--card);border:var(--edge-s);border-radius:16px;padding:14px;color:var(--ink);font:inherit;cursor:pointer;transition:border-color var(--dur),background var(--dur)}
.mtype>span:nth-child(2){display:grid;gap:3px;flex:1;min-width:0}
.mtype b{font:800 17px/1.2 var(--serif)}
.mtype small{color:var(--ink-2);font-size:12.5px;line-height:1.4}
.mtype:hover{border-color:var(--ink-3);background:var(--paper)}
.mtype:focus-visible{outline:3px solid var(--peng);outline-offset:2px}
.mtype[data-mtype="oauth"] .kic,.mtype[data-mtype="chatgpt"] .kic{background:var(--sage-wash);color:var(--rabbit-ink)}
.mtype[data-mtype="gateway"] .kic{background:var(--peri-wash);color:var(--peri-ink)}
.mdlg .field{margin:0}
.fams,.stypes{border:0;padding:0;margin:0}
.fams legend,.stypes legend{font:600 13px/1.3 var(--sans);color:var(--ink-2);margin-bottom:6px;padding:0}
.fams .row,.stypes .row{display:flex;gap:8px;flex-wrap:wrap}
.fams .opt,.stypes .opt{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:6px 14px;border:var(--edge-s);border-radius:999px;background:var(--card);font-size:var(--t-sm);cursor:pointer}
.fams .opt:has(input:checked),.stypes .opt:has(input:checked){border-color:var(--terra);background:var(--terra-wash)}
.fams .opt input,.stypes .opt input{accent-color:var(--terra);margin:0}
/* T376: no celular o Tipo da chave (Chave de API / Login e senha) empilha na largura da coluna, na borda dos campos de baixo.
   Lado a lado a segunda pílula começava no meio da coluna e, em ES ("Usuario y contraseña", 186px) e EN, passava da metade dela.
   Empilhadas viram linhas de opção com a altura (42px), o raio e o recuo de 12px dos campos, e 10px entre elas como entre as linhas da chave. */
@media (max-width:760px){
  .stypes .row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .stypes .opt{display:flex;min-height:42px;margin:0;padding:0 12px;gap:10px;border-radius:var(--rc)}
}
#setform .swopt{display:grid;margin-top:4px}
@media (max-width:620px){.mdlg .dlg-acts .btn{flex:1 1 auto;justify-content:center}}
/* T46: the plan line under the composer */
.plan-chip{color:var(--ink-2)}
/* T47 Passo 1: three ways in, one under the other, then the member's first answer */
.passo1 .p1-ways{display:flex;flex-direction:column;gap:12px;max-width:400px;margin:28px 0 14px}
.passo1 .p1-way{display:flex;flex-direction:column;align-items:stretch;gap:6px}
/* T72: provider sign-in, "Sign in with Google" family: one size, white, the brand mark in a fixed slot at left, label centered */
.btn.p1-sso{position:relative;margin:0;text-decoration:none;height:48px;padding:0 48px;border-radius:var(--rc);background:var(--card);border:var(--edge);color:var(--ink);font-size:15px;font-weight:600;box-shadow:var(--hard-s)}
.btn.p1-sso:hover{background:var(--card);border-color:var(--edge-ink);box-shadow:var(--hard-fox)}
.btn.p1-sso:focus-visible{outline:3px solid var(--peng);outline-offset:2px}
.p1-mark{position:absolute;left:16px;top:50%;transform:translateY(-50%);display:inline-flex;width:20px;height:20px}
.p1-mark svg{width:20px;height:20px}
.btn.p1-sso:disabled{opacity:1;cursor:not-allowed;background:var(--card);box-shadow:none;border-style:dashed}
.btn.p1-sso:disabled .p1-label{color:var(--ink-3)}
.p1-soon{position:absolute;right:12px;top:50%;transform:translateY(-50%);border-radius:99px;padding:5px 9px;font:600 11.5px/1 var(--sans);background:var(--honey-wash);color:var(--honey-ink);border:var(--edge-s)}
/* T73: on a phone the centered label ran into "em breve"; the button with the badge gives the label its own room. */
@media (max-width:620px){.btn.p1-sso:has(.p1-soon){padding:0 12px 0 44px;gap:12px}.btn.p1-sso:has(.p1-soon) .p1-label{flex:1 1 auto;min-width:0;text-align:center}
  .btn.p1-sso .p1-soon{position:static;transform:none;flex:none}}
.btn.p1-sso.p1-quiet{background:transparent;box-shadow:none;border-color:var(--line-2);color:var(--ink-2)}
.btn.p1-sso.p1-quiet:hover{background:var(--card)}
.p1-quiet .p1-mark{color:var(--honey-ink)}
.passo1 .p1-way .help{text-align:center;font-size:12.5px}
.p1-or{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:12.5px;margin:2px 0}
.p1-or::before,.p1-or::after{content:"";flex:1;border-top:1px solid var(--line)}
.p1-key{max-width:400px;margin:4px 0 0;text-align:center;font-size:var(--t-sm);color:var(--ink-3)}
.passo1 .help{color:var(--ink-3)}
.p1-why:empty{display:none}
.p1-why,.p1-later{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:6px}
.p1-later{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.p1-check{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:24px;max-width:520px}
.p1-check .face{width:72px;height:72px;margin:4px 0;box-shadow:none;flex:none}
.p1-check .face .m{width:64px;height:64px}
.p1-line q{font-weight:600}
.p1-acts{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:620px){.passo1 .p1-ways,.p1-key{max-width:none}.p1-acts .btn{flex:1 1 auto;justify-content:center}}

/* T73: the admin's first visit, full screen. The trupe on stage at the left (on top on a phone), the ways in at the right.
   The shell's menus stay out until the first member answers: on Passo 1 they are gone, elsewhere locked. */
body[data-view="start"] .side,body[data-view="start"] .dock,body[data-view="start"] .rail,body[data-view="start"] .tabbar{display:none!important}
body[data-view="start"] .app{grid-template-columns:minmax(0,1fr)}
body.onboarding .dock .dk,body.onboarding .side section:nth-of-type(2),body.onboarding .side-cfg,body.onboarding .tabbar{display:none!important}
body.onboarding[data-dest="config"] #sidechat{display:flex}
.passo1.onb{padding:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100%}
.onb-stage{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:48px 32px;
  background:var(--terra-wash);border-radius:0 var(--r4) var(--r4) 0}
.onb-dot{position:absolute;border-radius:46% 54% 51% 49% / 55% 45% 55% 45%;pointer-events:none}
.onb-dot.d1{width:220px;height:200px;left:-60px;top:-50px;background:var(--honey-wash)}
.onb-dot.d2{width:160px;height:150px;right:-40px;top:18%;background:var(--peri-wash);transform:rotate(18deg)}
.onb-dot.d3{width:260px;height:230px;right:8%;bottom:-120px;background:var(--sage-wash)}
.onb-dot.d4{width:22px;height:22px;left:22%;bottom:24%;background:var(--rose);opacity:.55}
.onb-say{position:relative;max-width:340px;padding:14px 18px;border-radius:20px 20px 20px 6px;background:var(--card);box-shadow:0 0 0 1.5px var(--edge-ink),var(--lift);
  font:800 19px/1.3 var(--serif);color:var(--ink);text-wrap:balance}
.onb-cast{position:relative;display:flex;align-items:flex-end;justify-content:center}
.onb-m{display:block;width:96px;height:96px;margin:0 -8px}
.onb-m .m{width:100%;height:100%}
.onb-m:nth-child(3),.onb-m:nth-child(4){width:124px;height:124px;z-index:1}
.onb-m:nth-child(2),.onb-m:nth-child(5){width:108px;height:108px}
.onb-main{display:flex;flex-direction:column;min-width:0;padding:28px 56px 40px}
.onb-top{display:flex;align-items:center;gap:10px}
.onb-top .brand-m{display:inline-flex}
/* T277: the fox mark on the sign-in screens, where there is no sidebar to carry it. */
.brand-m.login-brand{display:flex;justify-content:center;margin:clamp(20px,6vh,56px) auto 0}
.onb-body{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:420px;width:100%;margin:0 auto;padding:24px 0}
.onb-body .ph h1{font-size:clamp(30px,3vw,40px);margin-top:6px}
.onb-body .ph .kicker{font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--terra-ink)}
.onb-body .p1-ways,.onb-body .p1-key{max-width:none}
.onb-body .p1-key{text-align:center}
.onb-body .p1-check{align-items:center;text-align:center;max-width:none}
.onb-body .p1-check .face{width:96px;height:96px;margin:8px auto}
.onb-body .p1-check .face .m{width:88px;height:88px}
/* T179: "O que você quer pronto primeiro?" under the answer of Passo 1: three casos and Outra coisa, one card per line in the
   column of the onboarding, each a whole button (the mascot, the title in a verb, what gets ready, what it uses and when). */
.onb-body:has(.p1-casos){justify-content:flex-start}
.onb-body:has(.p1-casos) .p1-check{flex-direction:row;align-items:center;text-align:left;gap:12px;margin-top:18px}
.onb-body:has(.p1-casos) .p1-check .face{width:56px;height:56px;margin:0}
.onb-body:has(.p1-casos) .p1-check .face .m{width:50px;height:50px}
.p1-casos{display:grid;gap:var(--s3);margin-top:var(--s6);min-width:0}
.p1-casos h2{margin:0;font:800 24px/1.15 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.p1-casos .p1c-lede{margin:0;font-size:var(--t-sm);color:var(--ink-2);text-wrap:pretty}
.p1c-list{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.p1-caso{display:flex;align-items:flex-start;gap:12px;width:100%;min-width:0;padding:12px 14px;border:var(--edge-s);border-radius:var(--r2);background:var(--card);
  color:var(--ink);text-align:left;font:inherit;cursor:pointer;text-decoration:none;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.p1-caso:hover{border-color:var(--terra);background:var(--terra-wash)}
.p1-caso:focus-visible{outline:3px solid var(--peng);outline-offset:2px}
.p1-caso[disabled]{cursor:progress}
.p1c-face{width:40px;height:40px;flex:none}
.p1c-b{display:grid;gap:4px;flex:1;min-width:0;overflow-wrap:anywhere}
.p1c-b b{font:800 17px/1.2 var(--serif);text-wrap:balance}
.p1c-b small{font-size:var(--t-sm);color:var(--ink-2);text-wrap:pretty}
.p1c-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.p1c-meta .chip{white-space:nowrap}
.p1c-uses{font-size:12.5px;color:var(--ink-3)}.p1c-uses:empty{display:none}
.p1-caso.p1c-other{border-style:dashed;border-color:var(--line-2);background:transparent}
.p1-caso .bdots{align-self:center;margin-left:auto}
.p1-casos .formerr:empty{display:none}
/* T437: "Conte sua empresa", the review of the ficha and the suggestions, in the column of the onboarding. A form is a
   reading block, so the column grows to 600px and the step reads from the left; the stage keeps its side. */
.onb-body.co{max-width:600px;justify-content:flex-start}
.onb-body.co .ph .lede{max-width:var(--lede);text-wrap:pretty}
.onb-body .p1-check.p1-co{align-items:stretch;text-align:left;gap:var(--s5);margin-top:var(--s6)}
.p1-co [hidden]{display:none!important}
/* Icon and word 10px apart in every button and chip of the step. */
.p1-co .btn,.p1-co .chip,.p1-co .lnk{gap:10px}
.p1-co .formerr:empty{display:none}
.p1-co .help{margin:0;max-width:var(--measure);font-size:12.5px;line-height:1.45;color:var(--ink-3);text-wrap:pretty}
.co-form{display:grid;gap:var(--s6);min-width:0}
.co-f{display:grid;gap:var(--s2);min-width:0}
.co-l{font:700 13.5px/1.3 var(--sans);color:var(--ink)}
.co-f textarea{min-height:132px;resize:vertical;line-height:1.5;padding:10px 12px}
.co-f textarea::placeholder{color:var(--ink-3)}
.co-sites{display:grid;gap:var(--s2)}
.co-more{justify-self:start;display:inline-flex;align-items:center;gap:10px;padding:var(--s1) 0;font-size:var(--t-sm)}
.co-files{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.co-files li{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s2) var(--s2) var(--s3);border:var(--edge-s);border-radius:var(--r1);background:var(--card);min-width:0}
.co-fn{display:flex;align-items:center;gap:10px;flex:1;min-width:0;font-size:var(--t-sm);font-weight:600}
.co-fn>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-fn svg{flex:none}
.co-files small{flex:none;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.co-pick{justify-self:start;gap:10px;cursor:pointer}
.co-pick:focus-within{outline:3px solid var(--peng);outline-offset:2px}
.p1-co .p1-acts{padding-top:var(--s1)}
.co-now{display:flex;align-items:center;gap:var(--s3)}
.onb-body .p1-co .co-now .face{width:56px;height:56px;margin:0;flex:none}
.onb-body .p1-co .co-now .face .m{width:50px;height:50px}
.co-now .p1-line{margin:0;font-weight:600}
.co-srcs{list-style:none;margin:0;padding:0;display:grid;border:var(--edge-s);border-radius:var(--r2);background:var(--card);overflow:hidden}
.co-s{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:center;padding:var(--s3) var(--s4)}
.co-s+.co-s{border-top:1px solid var(--line)}
.co-si{grid-row:span 2;display:flex;align-items:center;justify-content:center;width:20px;height:20px;align-self:start;margin-top:1px}
.co-s.read .co-si{color:var(--moss)}
.co-s.unread .co-si{color:var(--danger)}
.co-sn{font-weight:600;font-size:var(--t-sm);min-width:0;overflow-wrap:anywhere}
.co-ss{font-size:12.5px;color:var(--ink-3);text-wrap:pretty}
.co-s.unread .co-ss{color:var(--ink-2)}
.co-spin{display:block;width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.co-spin{animation:co-spin .9s linear infinite}@keyframes co-spin{to{transform:rotate(360deg)}}}
.co-srcs.compact .co-s{padding:10px var(--s4)}
/* The ficha: one card per section, the title and Editar on one axis, the text, then where it came from. */
.fc-list{display:grid;gap:var(--s3)}
.fc-sec{display:grid;gap:10px;padding:var(--s4) var(--s5) var(--s4);border:var(--edge-s);border-radius:var(--r2);background:var(--card);min-width:0}
.fc-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:30px}
.fc-h h3{margin:0;font:800 var(--t-md)/1.25 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.fc-h .btn{flex:none}
.fc-t{margin:0;font-size:var(--t-sm);line-height:1.55;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
.fc-t.none{color:var(--ink-3);font-style:italic}
.fc-ta{width:100%;min-height:96px;resize:vertical;font-size:var(--t-sm);line-height:1.55;padding:10px 12px}
.fc-done{display:flex;justify-content:flex-end}
.fc-src{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:2px;padding-top:var(--s3);border-top:1px dashed var(--line)}
.fc-src:empty{display:none}
.fc-src:has(.fc-chips){flex-wrap:nowrap;align-items:flex-start;gap:var(--s3)}
.fc-from{font:700 11.5px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);flex:none;padding-top:8px}
/* T437: the chips wrap in their own column, so a second row starts under the first chip, never under FONTE */
.fc-chips{display:flex;flex-wrap:wrap;gap:var(--s2);flex:1 1 0;min-width:0}
.co-chip{max-width:100%;padding:5px 12px 5px 10px}
.co-chip>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.co-chip svg{flex:none}
.fc-unread{display:grid;gap:10px;padding:var(--s4) var(--s5);border:1.5px dashed var(--line-2);border-radius:var(--r2)}
.fc-unread h3{margin:0;font:800 var(--t-sm)/1.25 var(--serif)}
.fc-unread ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.fc-unread li{display:grid;gap:var(--s1);font-size:var(--t-sm)}
.fc-unread li b{font-weight:600;overflow-wrap:anywhere}
.fc-unread li span{font-size:12.5px;color:var(--ink-2)}
.p1-co .fc-later{margin-top:calc(var(--s2) * -1)}
/* The suggestions: Time, Salas and Primeiras tarefas, each a list of cards with their own Criar at the right. */
.sg-sec{display:grid;gap:var(--s3);min-width:0}
.sg-sec+.sg-sec{margin-top:var(--s3)}
.sg-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:30px}
.sg-h h2{margin:0;font:800 var(--t-lg)/1.2 var(--serif);letter-spacing:-.02em}
.sg-h .btn{flex:none}
.sg-list{display:grid;gap:var(--s3)}
.sg-card{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(96px,auto);align-items:start;gap:var(--s3);padding:var(--s3) var(--s4);border:var(--edge-s);border-radius:var(--r2);background:var(--card);min-width:0}
.sg-av{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--paper-2);border:var(--edge-s);font:800 16px/1 var(--serif);color:var(--ink)}
.sg-av.face{border:0;background:none}
.sg-av.face .m{width:40px;height:40px}
/* T437: a suggested member once made shows its face at the card's 40px, not at Passo 1's big face (it covered the text) */
.onb-body .p1-check .sg-av.face{width:40px;height:40px;margin:0}
.onb-body .p1-check .sg-av.face .m{width:40px;height:40px}
.sg-av.sala{background:var(--peri-wash);color:var(--peri-ink)}
.sg-task .sg-av{background:var(--terra-wash);color:var(--terra-ink)}
.sg-b{display:grid;gap:var(--s1);min-width:0;overflow-wrap:anywhere}
.sg-b b{font:800 15px/1.25 var(--serif)}
.sg-b small{font-size:12.5px;color:var(--ink-2)}
.sg-b p{margin:var(--s1) 0 0;font-size:var(--t-sm);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.sg-b q{font-size:var(--t-sm);line-height:1.5;font-weight:600;quotes:"“" "”"}
.sg-b .sg-pain{margin-top:var(--s1);font-size:12.5px;color:var(--ink-3)}
.sg-pain span{font-weight:700;color:var(--honey-ink)}
.sg-who{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s1)}
.sg-a{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2);align-self:center}
.sg-a .btn,.sg-a .chip{white-space:nowrap}
.p1-co>.help{margin-top:calc(var(--s1) * -1)}
/* A first task in the member's empty conversation, ahead of the other asks. */
.starter.task{border-color:var(--edge-ink);background:var(--terra-wash)}
.starter.task:hover:not(:disabled){border-color:var(--terra)}
@media (max-width:760px){
  .onb-body .p1-check.p1-co{gap:var(--s4);margin-top:var(--s5)}
  .co-form{gap:var(--s5)}
  .fc-sec{padding:var(--s4)}
  /* T437: on a phone the sources wrap; FONTE on its own line keeps every chip on the same left edge */
  .fc-src:has(.fc-chips){flex-wrap:wrap;gap:var(--s2)}
  .fc-from{flex-basis:100%;padding-top:0}
  .fc-chips{flex-basis:100%}
  .fc-unread{padding:var(--s4)}
  .sg-sec+.sg-sec{margin-top:var(--s2)}
  .sg-card{grid-template-columns:36px minmax(0,1fr);padding:var(--s3)}
  .sg-av{width:36px;height:36px}.sg-av.face .m{width:36px;height:36px}
  .onb-body .p1-check .sg-av.face,.onb-body .p1-check .sg-av.face .m{width:36px;height:36px}
  .sg-a{grid-column:2;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;align-self:start}
  .p1-co .p1-acts .btn{flex:1 1 100%}
}
@media (max-width:760px){
  .passo1.onb{display:flex;flex-direction:column;padding:0 0 env(safe-area-inset-bottom)}
  .onb-main{display:contents}
  .onb-top{order:-1;padding:12px 16px}
  .onb-stage{order:0;gap:14px;margin:0 12px;padding:20px 12px 16px;border-radius:var(--r3)}
  .onb-body{order:1;padding:22px 16px 32px;justify-content:flex-start}
  .onb-body .ph h1{font-size:28px}
  .onb-say{font-size:16px;padding:10px 14px;max-width:300px}
  .onb-m{width:56px;height:56px;margin:0 -5px}
  .onb-m:nth-child(3),.onb-m:nth-child(4){width:72px;height:72px}
  .onb-m:nth-child(2),.onb-m:nth-child(5){width:64px;height:64px}
  .onb-dot.d1{width:140px;height:120px}.onb-dot.d3{width:180px;height:150px;bottom:-110px}
}
@media (prefers-reduced-motion:no-preference){
  .onb-m{animation:onb-in .5s var(--spring) both;animation-delay:calc(var(--i) * 70ms)}
  .onb-m .m{animation:onb-hop 3.6s var(--ease) infinite;animation-delay:calc(1s + var(--i) * .45s);transform-origin:50% 100%}
  .onb-say{animation:onb-say .45s var(--spring) .55s both}
  .onb-dot.d4{animation:onb-float 6s ease-in-out infinite}
  .onb-body>*{animation:rise .4s var(--ease) both}
  .onb-body>*:nth-child(2){animation-delay:80ms}.onb-body>*:nth-child(3){animation-delay:140ms}
  @keyframes onb-in{from{opacity:0;transform:translateY(18px) scale(.9)}}
  @keyframes onb-hop{0%,14%,100%{transform:translateY(0)}5%{transform:translateY(-9px) rotate(-2deg)}9%{transform:translateY(0) scale(1.03,.97)}}
  @keyframes onb-say{from{opacity:0;transform:translateY(6px) scale(.96)}}
  @keyframes onb-float{50%{transform:translate(8px,-10px)}}
}
/* T50: the Google card a reply asks for, the drafts it left in Gmail, and the work while it runs */
.g-ask{align-self:flex-start;margin-left:44px;max-width:min(460px,calc(100% - 44px));background:var(--card);border:var(--edge-s);border-radius:18px;padding:14px 16px;display:grid;gap:10px}
.g-ask-h{display:flex;gap:12px;align-items:center}
.g-ask-h div{display:grid;gap:2px}
.g-ask-h small{color:var(--ink-2);font-size:var(--t-sm)}
.g-ask p{margin:0;font-size:14px;line-height:1.5}
.g-ask .acts{display:flex}
.g-ask .formerr:empty{display:none}
/* T427: "Onde criar a chave" sits 4px under the reason it belongs to, not 10px like a new block */
.g-ask p+p:has(>a.lnk:only-child){margin-top:-6px}
/* T427 key card: the key icon's top on the title's first line (was centered on the header, 14px under it); the
   'where to create' link 4px under the card's line it goes with; as much room under the button (its 4px shadow
   counted) as over the icon, 15px from the edge on both (was 10 under, 19 over the title). */
.g-ask-h.top{align-items:flex-start}
.g-ask-h.top .lnk{justify-self:start;margin-top:2px;font-size:var(--t-sm)}
form.k-ask{padding-bottom:18px}
/* T82: the first member's first message: who they are, then three first steps checked as they happen. */
.msgs>.first-msg:first-child{margin-top:auto}
.first-msg{align-items:flex-start}
.first-msg .mini-face{margin-top:2px}
.b.it.first-b{display:grid;gap:10px;padding:14px 16px;max-width:min(520px,calc(100% - 44px))}
.first-b p{margin:0}
.fm-hi{font-size:15.5px;font-weight:600;color:var(--ink)}
.fm-k{font-size:var(--t-sm);color:var(--ink-2)}
.fsteps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fs{display:flex;gap:11px;align-items:flex-start}
.fs>div{display:grid;gap:4px;min-width:0;flex:1}
.fs b{font-size:14.5px}
.fs small{color:var(--ink-2);font-size:var(--t-sm);line-height:1.45}
.fs-n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:600 12.5px/1 var(--mono);background:var(--card);border:var(--edge-s);color:var(--ink-2)}
.fs.done .fs-n{background:var(--moss);border-color:var(--moss);color:var(--on-ink)}
.fs.done b{color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--line-2)}
.fs .acts{display:flex;margin-top:4px}
.fs .conn-keep{margin-top:2px}
.fs .formerr:empty{display:none}
.starters.quick{align-self:flex-start;justify-content:flex-start;margin:-4px 0 0 44px;max-width:min(560px,calc(100% - 44px))}
@media (max-width:760px){.starters.quick{margin-left:0;max-width:100%;align-self:stretch}}
.first-msg+.pre-n{margin-left:44px}
.empty .g-ask.next{align-self:stretch;margin:14px 0 0;max-width:none;text-align:left}
.g-ask.next .next-k{font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.g-ask.next .acts .btn{text-decoration:none}
.g-ask .kic.logo,.g-drafts .kic.logo{background:var(--logo-tile);border:var(--edge-s);width:38px;height:38px}
.g-ask .kic.logo .ic,.g-drafts .kic.logo .ic{width:22px;height:22px}
.g-drafts{align-self:flex-start;margin-left:44px;max-width:min(460px,calc(100% - 44px));display:flex;gap:12px;align-items:center;background:var(--card);border:var(--edge-s);border-radius:16px;padding:10px 12px}
.g-drafts div{display:grid;gap:2px;flex:1;min-width:0}
.g-drafts b{font-size:14px}
.g-drafts small{color:var(--ink-2);font-size:var(--t-sm)}
.g-drafts .btn{flex:none}
/* T218: a team proposed in the conversation. One row per member (face, name, role, what it does, its rotinas) with its
   switch on the right; Criar makes the ones left on. Once decided, a line with who joined. */
.g-ask.team-ask{max-width:min(540px,calc(100% - 44px))}
/* T353: the access card. The chips are Conexões' own; what the request needs carries a thicker ink edge and a hard shadow,
   and in mel while it is still off (a member who is not an admin sees what is missing). */
/* Without the Liberar row (a member who is not an admin) the card shrank to its title and "Peça a um admin pra liberar"
   broke in two lines. T376: a min-width still left it 361px against the admin's 437px, so the same card changed size with
   who looked; it now takes the whole width the chat gives a card (460px on the desktop, the line on the phone). */
.g-ask.acc-ask{width:100%}
/* T353 espaçamento: 12px (s3) entre os blocos, a frase do que falta a 8px dos chips que ela nomeia; 8px entre chips porque o
   contorno grosso com sombra do chip pedido encostava no vizinho; 10px entre o ícone e o texto da dica. */
.g-ask.acc-ask{gap:12px}
.acc-ask>p+.gchips{margin-top:-4px}
.acc-ask .gchips{gap:8px}
/* T427: on every card of the conversation (access, and the key card of someone who is not an admin) the note's icon is 10px from its text */
.g-ask .conn-keep{gap:10px}
.acc-ask .gchip.need{border-width:2px;box-shadow:2px 2px 0 var(--edge-ink)}
.acc-ask .gchip.need[aria-pressed="false"]{background:var(--honey-wash);color:var(--honey-ink)}
/* T376: for a member the chips only say what is on and what is asked; the hard shadow is the app's "press me", so it goes. */
.acc-ask .gchip.need:disabled{box-shadow:none}
.team-ms{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.team-m{display:flex;gap:12px;align-items:flex-start;border:var(--edge-s);border-radius:var(--r1);padding:10px 12px}
.team-mi{flex:1;min-width:0;display:grid;gap:2px;overflow-wrap:anywhere}
.team-mi>b{font:800 var(--t-lg)/1.2 var(--serif);letter-spacing:-.01em}
.team-mi small{color:var(--ink-2);font-size:var(--t-sm)}
.team-ask .team-mi p{margin:4px 0 0;font-size:14px;line-height:1.45}
.team-ask .team-mi .team-rot{display:flex;gap:6px;align-items:flex-start;color:var(--ink-2);font-size:var(--t-sm)}
.team-rot .ic{flex:none;margin-top:2px}
.team-rot b{color:var(--ink);font:600 var(--t-sm)/1.4 var(--sans)}
.team-m .team-sw{flex:none;margin:-8px 0 -8px auto}
@media (max-width:640px){.team-m{flex-wrap:wrap;row-gap:4px}.team-m .team-sw{margin:-6px 0 -6px auto}.team-mi{order:3;flex:1 1 100%}}
.team-ask .acts{gap:8px;flex-wrap:wrap}
.team-made div{gap:4px}
.team-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.team-link{display:inline-flex;gap:6px;align-items:center;min-width:0;max-width:100%;padding:3px 10px 3px 3px;border:var(--edge-s);border-radius:99px;background:var(--card);color:var(--ink);font:600 12px/1.2 var(--sans);text-decoration:none}
.team-link span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-link .mini-face{width:24px;height:24px;border-radius:99px}
.team-link .mini-face .m{width:21px;height:21px}
.team-link:hover{border-color:var(--line-2)}
.night-n{align-items:flex-start}
.night-n .kic{flex:none}
.night-d{margin:0;padding-left:18px;display:grid;gap:2px;font-size:var(--t-sm);color:var(--ink-2)}
.wow-n{align-items:flex-start}
.wow-n .kic{flex:none}
.wow-q{display:block;quotes:none;font-size:var(--t-sm);color:var(--ink);background:var(--paper-2);border-left:2px solid var(--edge-ink);padding:4px 8px;border-radius:6px;overflow-wrap:anywhere}
.wow-h .wow-q{margin-top:4px}
.wow-w{margin:2px 0 0;padding:0;list-style:none;display:grid;gap:2px;font-size:var(--t-sm);color:var(--ink-2)}
.wow-w b{font-size:var(--t-sm);color:var(--ink);font-variant-numeric:tabular-nums}
.doing-n{font-size:12.5px;font-weight:600;color:var(--ink-2);margin-right:8px}
.enc-ask{align-self:flex-start;margin-left:44px;max-width:min(500px,calc(100% - 44px));background:var(--card);border:var(--edge-s);border-radius:18px;padding:14px 16px;display:grid;gap:10px}
.enc-h{display:flex;gap:12px;align-items:center}
.enc-h div{display:grid;gap:2px}
.enc-h small{color:var(--ink-2);font-size:var(--t-sm)}
.enc-h .kic{background:var(--honey-wash);width:38px;height:38px}
.enc-q{margin:0;font:600 16px/1.4 var(--sans)}
.enc-ask .starters{justify-content:flex-start;margin-top:0}
.enc-form{display:grid;gap:8px}
.enc-form textarea{resize:vertical;min-height:52px}
.enc-form .acts{display:flex;gap:8px;flex-wrap:wrap}
.enc-form .formerr:empty{display:none}
.enc-ask.nx .next-k{font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.enc-ask.nx .enc-form{border-top:1px solid var(--line);padding-top:12px;margin-top:2px}
.enc-ask.nx .enc-q{display:flex;gap:8px;align-items:center}
.enc-ask.nx .enc-form .help{color:var(--ink-2);font-size:var(--t-sm);margin-top:-4px}
.nx-wait{margin:0;display:flex;gap:6px;align-items:center;color:var(--ink-2);font-size:var(--t-sm)}
.nx-wait .ic{animation:breathe 1.6s ease-in-out infinite}
.enc-row .enc-what{margin:0;font-size:14px;line-height:1.45}
.enc-row small{display:block;margin:2px 0 6px}
@media (max-width:760px){
  .g-ask,.g-drafts,.enc-ask{margin-left:0;max-width:100%}
  /* T353: no celular o card de acesso de quem não é admin parava 6px antes da borda direita (o do admin vai até ela) */
  .g-ask.acc-ask{align-self:stretch}
  .g-drafts{flex-wrap:wrap}
  .g-drafts .btn{width:100%;justify-content:center}
}
/* T337: a question with options under the reply that stopped on it. A frame of its own (the agent waits on it): the
   question, A/B/C as rows with one line each, the person's own answer beside its button and Pular with what it means.
   Rows breathe on the 4px scale: 12px inside, 8px between, letter 12px from the words, 20px between the blocks. */
.ask-c{align-self:flex-start;margin-left:44px;width:calc(100% - 44px);max-width:min(620px,calc(78% + 40px));background:var(--card);border:var(--edge);border-radius:var(--r3);box-shadow:var(--hard-s);padding:var(--s5);display:grid;gap:var(--s5)}
.ask-row{align-items:flex-start}
/* Under a line of the same member it still stands 16px clear, not the 4px of a continued bubble: it is a block of its own. */
.row-it.ask-row.cont,.msgs>.ask-c{margin-top:calc(var(--s4) - var(--mgap))}
.ask-row .ask-c{margin-left:0;width:auto;flex:1;min-width:0}
.ask-c .ask-h{display:flex;align-items:center;gap:var(--s2);margin:0 0 calc(var(--s2) - var(--s5));font:700 11.5px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--terra-ink)}
.ask-c .ask-q{margin:0;font:800 var(--t-lg)/1.25 var(--sans);letter-spacing:-.02em;color:var(--ink);text-wrap:balance;overflow-wrap:anywhere}
.ask-os{display:grid;gap:var(--s2)}
.ask-o{display:flex;align-items:flex-start;gap:var(--s3);width:100%;padding:var(--s3) 14px;border:var(--edge-s);border-radius:var(--r2);background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur)}
.ask-o:focus-visible{outline:3px solid var(--peng);outline-offset:3px}
.ask-o .ask-k{flex:none;display:grid;place-items:center;width:28px;height:28px;border:var(--edge-s);border-radius:var(--r1);background:var(--paper-2);font:800 13px/1 var(--sans)}
.ask-o .ask-t{display:grid;gap:2px;min-width:0;padding-top:4px;overflow-wrap:anywhere}
.ask-o .ask-t b{font-size:var(--t-md);line-height:1.3}
.ask-o .ask-t small{font-size:var(--t-sm);line-height:1.4;color:var(--ink-2);text-wrap:pretty}
.ask-o.on{border:var(--edge);background:var(--d-yel);box-shadow:var(--hard-s)}
.ask-o.on .ask-k{background:var(--card)}
.ask-o:disabled{cursor:default;color:var(--ink)}
.ask-o:disabled:not(.on){background:transparent;border-style:dashed;border-color:var(--line-2)}
.ask-o:disabled:not(.on) .ask-t b{color:var(--ink-2)}
.ask-o:disabled:not(.on) .ask-k{background:transparent;color:var(--ink-3);border-color:var(--line-2)}
.ask-f{display:flex;gap:var(--s2);align-items:center;padding-top:var(--s5);border-top:1px solid var(--line)}
.ask-f .input{flex:1;min-width:0;text-overflow:ellipsis}
.ask-f .btn{height:42px;flex:none}
.ask-skip{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:calc(var(--s3) - var(--s5))}
.ask-skip small{font-size:12.5px;line-height:1.4;color:var(--ink-3);text-wrap:pretty}
.ask-skip .btn{flex:none}
.ask-done{display:flex;align-items:center;gap:var(--s2);margin:0;padding-top:var(--s4);border-top:1px solid var(--line);font-size:var(--t-sm);color:var(--ink-2)}
.ask-done .ic{color:var(--rabbit-ink);flex:none}
@media (prefers-reduced-motion:no-preference){
  .ask-o:not(:disabled):hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--fox)}
  .ask-o:not(:disabled):active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--fox)}
}
.ask-o:not(:disabled):hover{background:var(--paper)}
@media (max-width:760px){
  .ask-c{margin-left:0;width:100%;max-width:100%;padding:var(--s4);gap:var(--s4)}
  .ask-c .ask-h{margin-bottom:calc(var(--s2) - var(--s4))}
  .ask-f{padding-top:var(--s4)}
  .ask-skip{margin-top:calc(var(--s3) - var(--s4))}
  .ask-row>.mini-face{display:none}
  /* The conversation ends 6px above the composer on a phone: the card, with its shadow, keeps 14px clear of it. */
  .msgs>.ask-c,.ask-row{margin-bottom:var(--s2)}
}
/* T26: rotinas on the crachá */
.rot-list{list-style:none;margin:6px 0 8px;padding:0;display:grid;gap:10px}
.rot{display:grid;gap:2px;padding:10px 12px;border:var(--edge-s);border-radius:12px;background:var(--card)}
.rot.off .rot-what{color:var(--ink-3)}
.rot-what{margin:0;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.rot .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.rot-row>div>small.help{display:block;margin:2px 0 8px}
.rotform{display:grid;gap:6px;margin-top:8px}
.rotform label{font-size:13px;font-weight:600}
.rot-when{border:0;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rot-when legend{font-size:13px;font-weight:600;padding:0;margin-bottom:6px}
.rot-when .input{width:auto;flex:1 1 120px;min-width:0}
.rot-when .help{flex-basis:100%}
.rotform .acts{display:flex;gap:6px;flex-wrap:wrap}
/* T423: a rotina's run is a quiet event of the thread, not a block in the middle: the icon in the face column (centred on
   the 34px face), the words on the reply's edge (44px), 8px above the member's bubble that carries the result. */
.rot-n{position:relative;align-self:flex-start;max-width:min(620px,calc(78% + 40px));margin:0;padding-left:44px;font-size:12.5px;line-height:1.45;color:var(--ink-3);text-wrap:pretty}
.rot-n .ic{position:absolute;left:10px;top:2px;width:14px;height:14px;color:var(--pencil)}
.rot-n b{font-weight:600;color:var(--ink-2)}
/* "· Ver rotinas" wraps as one piece, never a dot alone at the start of a line; the link's touch target is 38px tall. */
.rot-n .rot-go{white-space:nowrap}
.rot-n .rot-dot{margin:0 6px 0 2px}
.rot-n .lnk{display:inline-block;padding:10px 0;margin:-10px 0}
.rot-n+.row-it{margin-top:calc(var(--s2) - var(--mgap))}

/* T27: the org's Kanban. Four columns side by side; on a phone they scroll sideways, one column per screen. */
.kb{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:14px;align-items:start;margin-top:8px}
.kb-col{background:var(--paper-2);border:var(--edge-s);border-radius:var(--r2);padding:12px;min-height:180px;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.kb-col.over{background:var(--sage-wash);border-color:var(--edge-ink)}
.kb-col h2{font:600 var(--t-sm)/1.2 var(--sans);color:var(--ink-2);margin:2px 4px 10px;display:flex;gap:8px;align-items:baseline}
.kb-col h2 .mono{font-size:var(--t-xs);color:var(--ink-3)}
.kb-list{display:flex;flex-direction:column;gap:10px}
.sk-kb{height:180px;border-radius:var(--r2)}
.kb-list .hint{margin:4px;font-size:var(--t-sm)}
.kb-card{background:var(--card);border:var(--edge-s);border-radius:var(--r1);padding:12px;box-shadow:var(--lift);cursor:pointer;display:flex;flex-direction:column;gap:8px}
.kb-card[draggable="true"]{cursor:grab}
.kb-card.dragging{opacity:.45}
.kb-card:focus-visible{outline:3px solid var(--peng);outline-offset:2px}
.kb-title{font:600 var(--t-md)/1.35 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.kb-whos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.kb-who{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:start;font-size:var(--t-sm)}
.kb-face{width:28px;height:28px;border-radius:9px;display:grid;place-items:center}
.kb-face .m{width:24px;height:24px}
.kb-who b{font-weight:600}
.kb-live{display:flex;align-items:center;gap:6px;margin-top:2px;color:var(--ink-3);font-size:var(--t-xs);font-weight:600}
.kb-pulse{width:9px;height:9px;border-radius:50%;flex:none;background:var(--line-2)}
.kb-who[data-tone="queued"] .kb-pulse{background:var(--peri);box-shadow:0 0 0 3px var(--peri-wash)}
.kb-who[data-tone="working"] .kb-live{color:var(--moss)}
.kb-who[data-tone="working"] .kb-pulse{background:var(--moss);box-shadow:0 0 0 3px var(--sage-wash)}
.kb-who[data-tone="quiet"] .kb-live,.kb-who[data-tone="stuck"] .kb-live{color:var(--honey-ink)}
.kb-who[data-tone="quiet"] .kb-pulse,.kb-who[data-tone="stuck"] .kb-pulse{background:var(--honey);box-shadow:0 0 0 3px var(--honey-wash)}
.kb-who[data-tone="done"] .kb-live{color:var(--moss)}
.kb-who[data-tone="done"] .kb-pulse{background:var(--moss)}
.kb-now{margin:3px 0 0;color:var(--ink-2);font-size:var(--t-xs)}
@media (prefers-reduced-motion:no-preference){
  .kb-who[data-tone="working"] .kb-pulse{animation:kbpulse 1.6s var(--ease) infinite}
  @keyframes kbpulse{0%,100%{box-shadow:0 0 0 2px var(--sage-wash)}50%{box-shadow:0 0 0 6px var(--sage-wash);transform:scale(1.12)}}
}
.kb-sum{margin:3px 0 0;color:var(--ink-2);overflow-wrap:anywhere}
.kb-links{margin:3px 0 0;display:flex;flex-direction:column;gap:2px}
.kb-links a{color:var(--terra-ink);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.kb-ask{margin:4px 0 0;display:flex;gap:6px;align-items:flex-start;background:var(--honey-wash);color:var(--honey-ink);border-radius:8px;padding:5px 8px}
.kb-err{margin:4px 0 0;background:var(--honey-wash);color:var(--honey-ink);border-radius:8px;padding:6px 8px;display:flex;flex-direction:column;gap:6px}
.kb-err p{margin:0;overflow-wrap:anywhere}
.kb-fix{display:flex;flex-wrap:wrap;gap:6px}
.kb-none{margin:0;font-size:var(--t-sm);color:var(--ink-3)}
.kb-foot{margin:0;display:flex;flex-wrap:wrap;gap:4px 10px;font:var(--t-xs)/1.3 var(--mono);color:var(--ink-3)}
.dlg-acts .sp{flex:1}
@media (max-width:1180px){.kb{grid-template-columns:repeat(4,minmax(240px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.kb-col{scroll-snap-align:start}}
@media (max-width:760px){.kb{grid-template-columns:repeat(4,86%);margin-right:-16px;padding-right:16px}.tabbar a{min-width:0;flex:1;padding:4px 2px}}
/* T330 Caixa de trabalho: the ask on top and three sections under it, across the page column like every screen (T359):
   the items of a section sit side by side in columns of --track, each at its own height (as Enquanto você estava fora on
   the home), so a short item never leaves a hole under it. Precisa de você
   on top in honey (the reason and the way out sit inside the item), Trabalhando in moss with the step under way,
   Esperando in peri/ink-3 saying what it waits for. Everything from the spacing scale (4px base). */
.wk-ask{background:var(--paper);border:var(--edge);border-radius:var(--r2);box-shadow:var(--hard-s);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);transition:box-shadow var(--dur)}
.wk-ask:focus-within{box-shadow:4px 4px 0 var(--fox)}
.wk-q{width:100%;min-height:64px;max-height:240px;resize:vertical;border:0;background:transparent;font:var(--t-md)/1.45 var(--sans);color:var(--ink);padding:0;outline:none}
.wk-q::placeholder{color:var(--ink-3)}
.wk-row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;border-top:var(--edge-s);border-top-color:var(--line);padding-top:var(--s3)}
.wk-sel{position:relative;display:flex;align-items:center;flex:0 1 auto;min-width:0}
.wk-sel .input{height:42px;width:auto;min-width:150px}
.wk-who .input{padding-left:48px;min-width:180px}
.wk-who .wk-face{position:absolute;left:8px;top:7px;width:28px;height:28px;pointer-events:none}
.wk-at .input{min-width:0;width:118px}
.wk-row>.btn{margin-left:auto;height:42px}
.wk-ask>.help{margin:0}
.page.work>.formerr{margin-top:var(--s2)}
.wk{display:flex;flex-direction:column;gap:var(--s8);margin-top:var(--s8)}
.sk-wk{height:120px;border-radius:var(--r2)}
.wk-sec{display:flex;flex-direction:column;gap:var(--s3)}
.wk-h{display:flex;align-items:center;gap:var(--s3);min-height:30px}
.wk-h h2{margin:0;font:700 var(--t-lg, 18px)/1.2 var(--sans);color:var(--ink)}
.wk-n{min-width:26px;height:22px;padding:0 var(--s2);border-radius:var(--pill);display:inline-grid;place-items:center;font:700 var(--t-xs)/1 var(--mono);background:var(--paper-2);color:var(--ink-2)}
.wk-sec[data-sec="need"] .wk-n{background:var(--honey-wash);color:var(--honey-ink)}
.wk-sec[data-sec="doing"] .wk-n{background:var(--sage-wash);color:var(--moss)}
.wk-h .add{margin-left:auto}
.wk-none{margin:0;padding:var(--s4) var(--s5);border:var(--edge-s);border-style:dashed;border-color:var(--line-2);border-radius:var(--r2);color:var(--ink-3);font-size:var(--t-sm)}
.wk-items{columns:var(--track) auto;gap:var(--s3)}
.wk-items>.wk-it{break-inside:avoid;margin-bottom:var(--s3)}
.wk-items>.wk-it:last-child{margin-bottom:0}
.wk-it{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);align-items:start;background:var(--card);border:var(--edge-s);border-radius:var(--r2);padding:var(--s4) var(--s5);box-shadow:var(--lift)}
.wk-it[data-sec="need"]{border-color:var(--edge-ink)}
/* Feito is quieter by colour only: same padding, face, shadow and axis as every other item. */
.wk-it[data-sec="done"]{background:var(--paper)}
.wk-it[data-sec="done"] .wk-title{color:var(--ink-2)}
.wk-faces{display:flex;flex-direction:column;gap:var(--s1)}
.wk-face{width:36px;height:36px;border-radius:var(--rc);display:grid;place-items:center;flex:none}
.wk-face .m{width:30px;height:30px}
.wk-who .wk-face .m{width:24px;height:24px}
.wk-face.none{background:var(--paper-2);color:var(--ink-3)}
.wk-main{min-width:0;display:flex;flex-direction:column;gap:var(--s2)}
.wk-top{display:flex;align-items:flex-start;gap:var(--s3);justify-content:space-between}
.wk-title{font:600 var(--t-md)/1.35 var(--sans);color:var(--ink);overflow-wrap:anywhere;min-width:0}
/* Every origin chip carries its icon and the same height, so the title beside it sits on one line whatever the origin. */
.wk-kind{flex:none;gap:var(--s1);color:var(--ink-2);height:24px;padding-block:0}
.wk-kind .ic{width:14px;height:14px}
.wk-st{margin:0;display:flex;align-items:baseline;gap:var(--s2);color:var(--ink-2);font-size:var(--t-sm);line-height:1.4}
.wk-st b{font-weight:600;color:var(--ink)}
.wk-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--line-2);transform:translateY(-1px)}
.wk-st[data-tone="queued"] .wk-dot{background:var(--peri);box-shadow:0 0 0 3px var(--peri-wash)}
.wk-st[data-tone="working"]{color:var(--moss)}
.wk-st[data-tone="working"] .wk-dot{background:var(--moss);box-shadow:0 0 0 3px var(--sage-wash)}
.wk-st[data-tone="wait"] .wk-dot{background:var(--ink-3)}
.wk-st[data-tone="off"]{color:var(--ink-3)}
@media (prefers-reduced-motion:no-preference){.wk-st[data-tone="working"] .wk-dot{animation:kbpulse 1.6s var(--ease) infinite}}
.wk-sub{margin:0;color:var(--ink-3);font:var(--t-xs)/1.4 var(--sans);padding-left:calc(9px + var(--s2))}  /* under the status text, past its dot */
.wk-why{background:var(--honey-wash);color:var(--honey-ink);border-radius:var(--rc);padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.wk-it[data-tone="review"] .wk-why{background:var(--sage-wash);color:var(--ink)}
.wk-why p{margin:0;overflow-wrap:anywhere;line-height:1.45;white-space:pre-line}
.wk-links{display:flex;flex-direction:column;gap:var(--s1)}
/* One line per link, cut with an ellipsis at the edge: a link never breaks over two lines into the next one. */
.wk-links a{display:block;color:var(--terra-ink);text-decoration:underline;text-underline-offset:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-acts{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s1)}
.wk-acts:empty{display:none}
/* A ghost button (Detalhes, Ver no crachá) that opens the row shows no box, so its text, not its box, sits on the axis of
   the card text above it, where Aprovar's edge sits in Precisa de você: pulled left by its own padding and border. */
.wk-acts>.btn.soft:first-child{margin-inline-start:-11.5px}
/* The answer takes the row; Detalhes stays beside it at the same height and axis. */
.wk-ans{display:flex;gap:var(--s2);flex:1 1 300px;align-items:center;min-width:0}
.wk-ans .input{flex:1;min-width:0;height:36px}
.wk-ans .btn,.wk-acts:has(.wk-ans) .btn{height:36px;flex:none}
.wk-start .casos-grid{margin-top:var(--s1)}
.wk-start>.help{margin:0}
/* T374: Lista | Colunas in the head, the same items either way. Colunas puts the four sections side by side, each a
   --paper-2 column whose items stack at their own height; every column stands even when empty, and Feito shows all. */
.wk-view{position:static;flex:none}
.wk-view a{display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);padding:8px var(--s4)}
.wk-view .ic{width:16px;height:16px;flex:none}
.wk.wk-cols{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:var(--s4);align-items:start}
.wk-cols .wk-sec{background:var(--paper-2);border:var(--edge-s);border-radius:var(--r2);padding:var(--s3) var(--s3) var(--s4);gap:var(--s3);min-height:200px}
.wk-cols .wk-h{padding:var(--s1) var(--s4) 0;min-height:28px}  /* the heading on the axis of the cards' content */
.wk-cols .wk-h h2{font-size:var(--t-md)}
.wk-cols .wk-items{columns:auto;display:flex;flex-direction:column;gap:var(--s3)}
.wk-cols .wk-items>.wk-it{margin:0}
.wk-cols .wk-it{padding:var(--s4);column-gap:var(--s3);row-gap:var(--s2)}
/* In a column the face sits only beside the title: the status, the reason and the actions take the card's whole width. */
.wk-cols .wk-main{display:contents}
.wk-cols .wk-main>*:not(.wk-top){grid-column:1/-1}
.wk-cols .wk-main>.wk-acts{margin-top:var(--s2)}
.wk-cols .wk-face{width:32px;height:32px}
.wk-cols .wk-face .m{width:26px;height:26px}
.wk-cols .wk-top{flex-direction:column;gap:var(--s2)}
.wk-cols .wk-why{padding:var(--s3)}
.wk-cols .wk-ans{flex-wrap:wrap}
.wk-cols .wk-ans .input{flex:1 1 100%}
.wk-cols .wk-none{padding:var(--s4);background:transparent}
.wk-cols>.sk-wk{height:200px}
/* T374 acabamento: the four columns stand at the height of the tallest, so the board is one rectangle and, on a phone,
   the next column peeks along the whole board. A card in a column is compact: 12px at the sides, the reason in at most
   three lines and the sources in two links plus "mais N" (Detalhes has everything), so Precisa de você does not run
   a screen past the others. Detalhes / Ver a rotina is a link on the actions' row, at its right edge. */
.wk.wk-cols{align-items:stretch}
.wk-cols .wk-it{padding:var(--s4) var(--s3)}
.wk-cols .wk-why>p:not(.wk-links){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.wk-more{display:none}
.wk-cols .wk-links:not(.open)>a:nth-of-type(n+3){display:none}
.wk-cols .wk-links:not(.open)>.wk-more{display:block;align-self:flex-start;background:none;border:0;padding:0;margin:0;font:600 var(--t-sm)/1.45 var(--sans);color:var(--ink-2);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.wk-cols .wk-acts>.wk-go:not(:first-child){margin-inline-start:auto;margin-inline-end:-4px;padding-inline:4px}
@media (max-width:1180px){.wk.wk-cols{grid-template-columns:repeat(4,minmax(240px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s2)}.wk-cols .wk-sec{scroll-snap-align:start}}
@media (max-width:760px){
  /* Quem faz takes its own line: a long member name never gets cut inside the select on a phone. */
  .wk-row>.wk-sel{flex:1 1 calc(50% - var(--s2))}
  .wk-row>.wk-who{flex-basis:100%}
  .wk-sel .input,.wk-who .input{min-width:0;width:100%}
  .wk-at{flex:0 0 118px}
  .wk-row>.btn{flex:1 1 100%;margin-left:0}
  .wk-it{padding:var(--s4);gap:var(--s3)}
  .wk-face{width:32px;height:32px}
  .wk-top{flex-direction:column;gap:var(--s2)}
  .wk{gap:var(--s6);margin-top:var(--s6)}
  .wk-ans .input,.wk-ans .btn,.wk-acts:has(.wk-ans) .btn{height:38px}
  .wk-acts>.btn.soft:first-child{margin-inline-start:-13.5px}
  /* Each column is the screen less 56px: 16px of page edge, 12px between columns and 28px of the next one peeking, so it
     reads as something that scrolls sideways; the native scrollbar under the board is hidden (T374 acabamento). */
  .wk.wk-cols{grid-template-columns:repeat(4,calc(100vw - 56px));gap:var(--s3);margin-right:-16px;padding-right:16px;padding-bottom:0;scroll-padding-left:0;scrollbar-width:none}
  .wk.wk-cols::-webkit-scrollbar{display:none}
  .wk-view{width:100%}
  .wk-view a{flex:1 1 0}
}
/* T76 Conecte com o ChatGPT: two numbered steps, the one-time code large and easy to copy. */
.gdev{max-width:640px}
.gdev-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
.gdev-step{display:grid;grid-template-columns:28px 1fr;gap:12px;background:var(--card);border:var(--edge-s);border-radius:14px;padding:16px 18px}
.gdev-step h2{font:600 15px/1.35 var(--sans);color:var(--ink);margin:3px 0 6px}
.gdev-n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--terra-wash);color:var(--terra-ink);font:600 13px/1 var(--sans)}
.gdev-switch{margin:6px 0;padding:8px 10px;border-radius:8px;background:var(--paper-2);font:500 13px/1.4 var(--sans);color:var(--ink)}
.gdev-step .actions{margin-top:10px;flex-wrap:wrap}
.gdev-codebox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0}
.gdev-code{font:600 26px/1.2 var(--mono);letter-spacing:.12em;color:var(--ink);background:var(--paper-2);border:1.5px dashed var(--edge-ink);border-radius:10px;padding:10px 14px;user-select:all}
.gdev-wait{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:var(--t-sm);margin-top:10px}
.gdev-wait .bdots{position:static}
#gderr:empty{display:none}
#gderr p{margin:0 0 8px}
@media (max-width:520px){.gdev-step{grid-template-columns:1fr;padding:14px}.gdev-code{font-size:22px}}
/* T77 Entrar com Claude: Gerar outro link is a quiet text action under the help line. */
.c-again{background:none;border:0;padding:6px 0;min-height:32px;margin-top:4px;color:var(--terra-ink);font:600 var(--t-sm)/1.4 var(--sans);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.c-again:hover{color:var(--ink)}.c-again[disabled]{opacity:.6;cursor:default}.c-again[hidden]{display:none}
/* T95: the onboarding after the first three steps: four more, at the end of the first member's conversation. */
.tour{align-self:flex-start;margin-left:44px;max-width:min(520px,calc(100% - 44px));background:var(--card);border:var(--edge-s);border-radius:18px;padding:14px 16px;display:grid;gap:10px}
.tour .next-k{font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.tour .tour-h{font-size:15.5px}
.tour .acts{flex-wrap:wrap;gap:8px}
.tour .fs small.hint{font-style:italic}
.tour .fs small.made{margin-top:4px;color:var(--ink)}
.tour .fs small.made a{font-weight:600}
.tour-f{display:grid;gap:8px;width:100%}
.tour-f .input{width:100%}
.tour-f .btn{justify-self:start}
.fs.busy .fs-n{border-color:var(--moss);color:var(--moss);animation:tourpulse 1.6s ease-in-out infinite}
@keyframes tourpulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.fs.busy .fs-n{animation:none}}
@media (max-width:760px){.tour{margin-left:0;max-width:100%;align-self:stretch}}

/* T118: a thread does not get lost. Threads in the sidebar with a badge of what is new; on the phone the badge sits on
   Rodas. The chip under a thread's first line says who, how many and when; a reply sent to the room too says its thread. */
.side-threads{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:0 0 4px;border-radius:13px;font:600 13.5px/1.25 var(--sans);color:var(--ink-2);transition:background var(--dur)}
.side-threads:hover,.side-threads[aria-current="true"]{background:var(--card)}
.side-threads .ic{width:18px;height:18px;color:var(--terra-ink)}
.side-threads .tbadge{margin-left:auto}
.tbadge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 6px;border-radius:9px;background:var(--terra-ink);color:var(--on-ink);font:700 11px/1 var(--sans);font-style:normal;white-space:nowrap}
.tabbar a{position:relative}
.tabbar a .tbadge{position:absolute;top:0;left:calc(50% + 6px);height:16px;min-width:16px;padding:0 4px;font-size:10px;box-shadow:0 0 0 2px var(--paper)}
.rbar.new b{color:var(--terra-ink)}
.rbar .tbadge{margin-left:2px}
.cf.pcf{background:var(--ink);color:var(--on-ink);font:600 11px/1 var(--sans)}
/* T430: a person's photo fills their face, cut by the face's own box (round, or a sala line's rounded square) and never
   stretched; the paper behind it only shows through a photo with transparency. */
.has-ph{overflow:hidden;background:var(--paper-2)!important;padding:0}
.has-ph>.pph{width:100%;height:100%;display:block;object-fit:cover}
.ralso-from{display:flex;align-items:center;gap:6px;max-width:100%;margin:0 0 4px;padding:0;border:0;background:transparent;color:var(--ink-3);font-size:12.5px;cursor:pointer;text-align:left}
.ralso-from span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ralso-from:hover span,.ralso-from:focus-visible span{color:var(--terra-ink);text-decoration:underline}
.ralso-from .ic{flex:none;width:14px;height:14px}
.rmsg.mine .ralso-from{margin-left:auto}
.ralso-tag{display:block;margin-top:2px;color:var(--ink-3);font-size:12px}
.rmsg.mine .ralso-tag{text-align:right}
.ralso{display:grid;margin:-8px 14px 4px;flex:none}
.thr-link{display:flex;align-items:center;gap:12px;margin:4px 0 18px;padding:14px 16px;border:var(--edge-s);border-radius:18px;background:var(--card);color:var(--ink)}
.thr-link>.ic{width:22px;height:22px;color:var(--terra-ink);flex:none}
.thr-link .rt{margin-left:0;flex:1}
.thr-link .rt b{font:800 18px/1.2 var(--serif)}
.thr-link .rt small{font-size:13px}
.thr-list{margin-top:8px}
.thr{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:var(--edge-s);border-radius:18px;background:var(--card);color:var(--ink);transition:border-color var(--dur)}
.thr:hover,.thr:focus-visible{border-color:var(--line-2)}
.thr.new{background:var(--fox-w);box-shadow:var(--hard-s)}
.thr-h{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3)}
.thr-where{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thr-where .ic{width:14px;height:14px;flex:none}
.thr-h .tbadge{margin-left:auto}
.thr-root{font-size:15px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.thr-last{font-size:13.5px;line-height:1.4;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.thr-last b{font-weight:600}
.thr.new .thr-last{color:var(--ink)}
.thr-foot{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--terra-ink)}

/* T100: Documento, a Mesa file read beside the screen it came from. Half the width on the desktop, the whole screen on the
   phone; Tela cheia takes the whole window. Plain card, the dialog's shadow, never a modal over the conversation. */
.docp{position:fixed;top:0;right:0;bottom:0;z-index:40;width:min(50vw,100vw);min-width:min(460px,100vw);display:flex;flex-direction:column;background:var(--card);border-left:var(--edge);box-shadow:none;outline:none}
.docp.full{width:100vw;min-width:0;border-left:0}
.docp-h{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s5) var(--s6) var(--s2)}
.docp-t{flex:1;min-width:0}
.docp-t h2{margin:4px 0 2px;font:800 22px/1.2 var(--serif);overflow-wrap:anywhere;text-wrap:balance}
.docp-m{display:block;color:var(--ink-3);font-size:12.5px;min-height:1.5em}
.docp-acts{display:flex;flex-wrap:wrap;gap:var(--s2);padding:0 var(--s6) var(--s4);border-bottom:1px solid var(--line)}
.docp-acts .btn{text-decoration:none}
.docp-acts .btn[aria-pressed="true"]{background:var(--terra-wash);border-color:var(--terra);color:var(--terra-ink)}
.docp-h .docp-full[aria-pressed="true"]{background:var(--terra-wash);color:var(--terra-ink)}
.docp-b{flex:1;overflow:auto;padding:var(--s5) var(--s6) var(--s10);display:grid;align-content:start;gap:var(--s3)}
.docp.full .docp-b>*{width:100%;max-width:var(--read);margin-inline:auto}
.docp-md{min-width:0;overflow-wrap:anywhere;font-size:var(--t-md);line-height:var(--lh)}
.docp-raw{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:400 13px/1.55 var(--mono);color:var(--ink);background:var(--paper-2);border-radius:var(--r2);padding:var(--s4)}
@media (max-width:600px){
  .docp{width:100vw;min-width:0;border-left:0}
  .docp-h{padding:var(--s4) var(--s4) var(--s2)}
  .docp-acts{padding:0 var(--s4) var(--s3)}
  .docp-b{padding:var(--s4) var(--s4) var(--s10)}
  .docp-full{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .docp{transform:translateX(24px);opacity:0;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
  .docp.in{transform:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){.docp{transform:none;opacity:1}}
/* T103: Baixar PDF prints the open document alone, as the panel shows it: no app around it, no header or buttons. */
@media print{
  body.doc-open{background:var(--card)}
  body.doc-open>*:not(#docp){display:none!important}
  body.doc-open .docp{position:static;width:auto;min-width:0;border:0;box-shadow:none;transform:none;opacity:1;display:block}
  body.doc-open .docp-h,body.doc-open .docp-acts,body.doc-open .mdcopy{display:none!important}
  body.doc-open .docp-b{overflow:visible;padding:0;display:block}
  body.doc-open .docp-b>*{max-width:none}
  body.doc-open .docp-md :is(blockquote,tr){break-inside:avoid}
  body.doc-open .docp-md .mdh{break-after:avoid}
  @page{margin:18mm 16mm}
}

/* T102: Arquivos, every Mesa's files in one list, and a Mesa's own page with its tabs. */
.files-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s2)}
.filerow{text-decoration:none;color:var(--ink);min-width:0}
.filerow .fn{flex:1;min-width:0;display:grid;gap:2px}
.filerow .fn b{font:800 16px/1.3 var(--serif);overflow-wrap:anywhere}
.filerow .fopen{color:inherit;text-decoration:none;min-width:0}
.filerow .fopen:hover b{text-decoration:underline}
.filerow .fn small{margin-left:0}
.filerow .facts{display:flex;gap:6px;flex:none;margin-left:auto}
.filerow .facts .btn{text-decoration:none}
/* T359: Arquivos is a grid of --track tiles like every list page; in a tile the buttons go under the name, never squeezing it. */
.page.files .cards>.filerow{flex-wrap:wrap;align-content:start}
.page.files .cards>.filerow .facts{flex:1 1 100%;margin-left:50px}
/* T381: the filter bar and its tiles are one block: 16px on the 4px scale, not the 18px every .cards inherits. */
.page.files .files-bar+.cards{margin-top:var(--s4)}
.filerow .face{width:38px;height:38px;flex:none}
.mesa-tabs{position:static}
@media (max-width:640px){
  .files-bar{grid-template-columns:minmax(0,1fr)}
  .filerow{flex-wrap:wrap}
  .filerow .facts{flex:1 1 100%;margin-left:50px}
}

/* T134: template strip at the top of Chamar alguém. One card on the column; chips never break inside (nowrap), wrap as
   whole chips on the desktop and become one row that scrolls sideways on the phone. */
.tplband{display:grid;gap:var(--s3);background:var(--card);border:var(--edge-s);border-radius:var(--r2);padding:var(--s4);margin-top:var(--s5);min-width:0}
.tpl-top{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3)}
.tpl-top .lbl{font:600 13px/1.3 var(--sans);color:var(--ink-2)}
.tpl-tabs{display:flex;gap:4px;background:var(--paper-2);border-radius:99px;padding:4px;margin-left:auto}
.tpl-tabs button{border:0;background:none;border-radius:99px;padding:6px 14px;font:600 13px/1.1 var(--sans);color:var(--ink-2);cursor:pointer;white-space:nowrap}
.tpl-tabs button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:var(--lift)}
.tpl-tabs button:focus-visible{outline:3px solid var(--peng);outline-offset:1px}
.tplband>.help{margin:0}
.tpl-chips{display:flex;flex-wrap:wrap;gap:var(--s2);min-width:0}
.tpl-chip{cursor:pointer;padding:3px 12px 3px 3px;min-height:32px;flex:none}
.tpl-chip[data-tpl=""]{padding:5px 12px}
.tpl-chip .tpl-face{width:24px;height:24px;flex:none}
.tpl-chip:hover{border-color:var(--terra);color:var(--terra-ink)}
.tpl-chip[aria-pressed="true"]{background:var(--terra-wash);border-color:var(--terra);color:var(--terra-ink)}
.tpl-chip:focus-visible{outline:3px solid var(--peng);outline-offset:2px}
.tpl-sum{border-top:1px solid var(--line);padding-top:var(--s3);display:grid;gap:var(--s2);min-width:0}
.tpl-sum[hidden]{display:none}
.tpl-name{font:800 18px/1.2 var(--serif);color:var(--ink)}
.tpl-sum p{margin:0;font-size:var(--t-sm);color:var(--ink-2);overflow-wrap:anywhere}
.tpl-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--s2) var(--s4);margin:0;align-items:baseline}
.tpl-kv dt{font:700 11.5px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.tpl-kv dd{margin:0;font-size:var(--t-sm);color:var(--ink);min-width:0;display:grid;gap:6px}
.tpl-uses{display:flex;flex-wrap:wrap;gap:6px}
.tpl-uses .chip small{font-weight:500;color:var(--ink-3);margin-left:2px}
.tpl-rot{display:grid;gap:2px;font-size:var(--t-sm);color:var(--ink-2);margin-bottom:var(--s2)}
.tpl-rot b{color:var(--ink);font-weight:600}
@media (max-width:760px){
  .tplband{padding:var(--s3)}
  .tpl-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--s3));padding:2px var(--s3)}
  .tpl-chips::-webkit-scrollbar{display:none}
  .tpl-kv{grid-template-columns:minmax(0,1fr);gap:4px}
  .tpl-kv dd+dt{margin-top:var(--s2)}
  .caso-dlg .caso-can{row-gap:4px}
}
@media (prefers-reduced-motion:no-preference){.tpl-chip{transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform .2s var(--spring)}.tpl-chip:hover{transform:rotate(-1deg)}}

/* T178: casos (T168, section 5). Chamar alguém opens on Casos | Modelos | Em branco; a caso card says what gets done, when,
   what it uses and what waits for you, with Usar. 3 columns on a wide screen (parts lined up across a row), 1 on a phone. */
.new-tabs{position:static;margin-top:22px;max-width:var(--read)}
.new-tabs a{flex:1 1 0;padding:8px 18px}
.casos-gal{display:grid;gap:var(--s3);margin-top:var(--s5);min-width:0}
/* T424: the three tabs of Chamar alguém put what they open 20px under them, so nothing moves when one is picked. */
.new-tabs~.form{margin-top:var(--s5)}
.casos-gal>.help,.home-casos>.help{margin:0}
.gal-for{display:flex;align-items:center;gap:var(--s3);margin:0;padding:8px 12px;background:var(--terra-wash);border-radius:var(--r2);font-size:var(--t-sm);color:var(--ink)}
.gal-for .face{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none}.gal-for .face svg{width:28px;height:28px}
.gal-for .btn{margin-left:auto}
/* The templates gallery keeps its own narrower track: 3 columns beside the list at 1440, 4 at 1680, 2 at 1024. */
.casos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--s3)}
.caso-card{background:var(--card);border:var(--edge-s);border-radius:var(--r2);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);min-width:0;overflow-wrap:anywhere;cursor:pointer}
.caso-card:hover{border-color:var(--line-2)}
@supports (grid-template-rows:subgrid){.casos-grid{grid-template-rows:repeat(5,auto);row-gap:var(--s3)}.caso-card{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:var(--s3)}}
.caso-top{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;min-width:0}
.caso-face{width:40px;height:40px;flex:none}
.caso-top .chip{white-space:nowrap}
.caso-card h3{font:800 18px/1.2 var(--serif);margin:0;text-wrap:balance;color:var(--ink)}
.caso-ready{margin:0;font-size:var(--t-sm);color:var(--ink-2);text-wrap:pretty}
.caso-kv{margin:0;border-top:1.5px dashed var(--edge-ink);padding-top:var(--s3);display:grid;gap:var(--s2);align-content:start;font-size:var(--t-sm)}
.caso-kv div{display:grid;gap:2px;min-width:0}
.caso-kv dt{font:700 11.5px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.caso-kv dd{margin:0;color:var(--ink);min-width:0}
.caso-uses{display:flex;flex-wrap:wrap;gap:6px}
.caso-uses .chip,.caso-can .chip{white-space:nowrap;max-width:100%}
.caso-use{justify-self:start;align-self:end}
.home-casos{display:grid;gap:var(--s3);margin-top:var(--s8)}
/* T345: the subtitle starts on the column edge, like the lede and the cards under it (the sidebar inset is for the sidebar). */
.home-casos .sec-t{padding-inline:0}
.caso-dlg{width:min(620px,calc(100vw - 32px))}
.caso-dlg-top{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}.caso-dlg-top .btn{margin-left:auto}
.caso-dlg h2{margin:0 0 6px;text-wrap:balance}
.caso-dlg .mono{display:block;margin:var(--s4) 0 6px}
.caso-sample{white-space:pre-wrap;background:var(--paper-2);border-radius:var(--r2);padding:12px 14px;font-size:var(--t-sm);color:var(--ink);overflow-wrap:anywhere}
.caso-steps{margin:0;padding-left:20px;display:grid;gap:6px;font-size:var(--t-sm);color:var(--ink-2)}
/* T375: the limit rows sit under a dashed rule like the card's, so they never read as a 4th step, 12px apart (8 glued the chip row) */
.caso-can{margin-top:var(--s4);padding-top:var(--s4);border-top:1.5px dashed var(--edge-ink);row-gap:var(--s3)}
.caso-dlg .field{margin-top:var(--s4);display:grid;gap:6px}
.caso-dlg .field label{font:600 13px/1.3 var(--sans);color:var(--ink-2)}
.caso-dlg .help{margin:0}
.caso-webn{background:var(--honey-wash);border-radius:var(--r1);padding:6px 10px;color:var(--ink)}
.cracha-acts{margin-top:var(--s2);display:flex;flex-wrap:wrap;gap:var(--s2)}
/* T181: the saved caso link reads whole */
#sc-link{font-size:12px}
@media (max-width:720px){
  .casos-grid{grid-template-columns:minmax(0,1fr)}
  @supports (grid-template-rows:subgrid){.casos-grid{grid-template-rows:none}.caso-card{grid-row:auto;grid-template-rows:none;display:flex}}
  .new-tabs a{padding:12px 6px}
  .gal-for{flex-wrap:wrap}.gal-for .btn{margin-left:0}
  .casos-gal #galtabs{margin-left:0;width:100%}.casos-gal #galtabs button{flex:1 1 0}
  .caso-dlg .tpl-kv{grid-template-columns:minmax(0,1fr)}
}
/* T190: Guardar uma chave in rows. Nome | Valor | tirar on the column grid; on a phone the name and the x share a line
   and the value goes under them. A row's error and note sit on the row itself. */
.krows{display:grid;gap:8px;min-width:0}
.krow-h,.krow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 38px;column-gap:10px;align-items:center}
.krow-h .lbl{margin:0}
.krow-list{display:grid;gap:10px;min-width:0}
.krow{grid-template-areas:"n v x" "e e e" "h h h"}
.krow .kn{grid-area:n;font-family:var(--mono);font-size:13.5px}.krow .kn::placeholder{font-family:var(--mono)}
.krow .kv{grid-area:v}.krow .krm{grid-area:x}
.krow .kerr{grid-area:e;margin:6px 0 0;color:var(--danger);font-size:var(--t-sm)}
.krow .khint{grid-area:h;margin:6px 0 0;color:var(--ink-3);font-size:12.5px}
.krow .kerr:empty,.krow .khint:empty{display:none}
.krow .input[aria-invalid=true]{border-color:var(--danger)}
.krow-add{display:flex;margin-top:2px}
.krows>.help{margin:4px 0 0}
@media (max-width:760px){
  .krow-h{display:none}
  .krow{grid-template-columns:minmax(0,1fr) 38px;grid-template-areas:"n x" "v v" "e e" "h h";row-gap:8px;padding-top:10px;border-top:1.5px dashed var(--edge-ink)}
  .krow:first-child{border-top:0;padding-top:0}
  .krow .kerr,.krow .khint{margin:0}
}
/* T273: chip nunca quebra por dentro (DESIGN.md, Layout). Etiquetas em pílula que ainda não tinham nowrap. */
.rchip,.labels i,.rot-tag,.sl-tag,.mprov-n,.p1-soon,.tab-n,.count,.answer .ans{white-space:nowrap}
/* T273: "reduzir movimento" para tudo. Sobravam transições (botão de papel, chave, cartão) e o respirar do ícone de espera fora do bloco no-preference. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}}
/* T282: the theme picker of Seu perfil, .choice cards. Each swatch wears its own theme (data-theme on the element), so it
   shows paper, card, text, contour and the main action of that theme whatever the screen wears now. */
.choices.themes{grid-template-columns:repeat(4,minmax(0,1fr))}
.th-pv{display:flex;height:54px;border-radius:10px;overflow:hidden;border:var(--edge-s);margin-bottom:6px}
.th-sw{flex:1;min-width:0;display:flex;align-items:center;gap:7px;padding:9px;background:var(--paper)}
.th-card{flex:1;min-width:0;align-self:stretch;display:grid;align-content:center;gap:5px;padding:0 8px;border-radius:7px;background:var(--card);border:1.5px solid var(--edge-ink)}
.th-card b{display:block;height:4px;border-radius:2px;background:var(--ink)}
.th-card b+b{width:62%;background:var(--ink-3)}
.th-act{flex:none;width:18px;height:18px;border-radius:6px;background:var(--fill);border:1.5px solid var(--edge-ink)}
@media (max-width:760px){.choices.themes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.fact .fmore{width:38px;height:38px;margin:-8px -8px -8px 0}.mblock>.more,.tp-b>.more,details.gone>.more{min-height:38px;padding:10px 0}}
/* T338: the line under a reply (steps, memory, time) and the trace it opens. Quiet like the answers beside it, always shown. */
.answer .trace-l{display:inline-flex;align-items:center;gap:10px;margin-right:6px;max-width:100%;min-width:0;font:500 12px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-3);background:none;border:1px solid transparent;border-radius:14px;padding:6px 8px 6px 10px;cursor:pointer;transition:color .15s,border-color .15s}
.answer .trace-l:hover,.answer .trace-l:focus-visible{color:var(--ink);border-color:var(--edge-ink)}
.answer .trace-l .tl-t{display:flex;flex-wrap:wrap;row-gap:6px;min-width:0;text-align:left}
.answer .trace-l .tl-b{white-space:nowrap}
.answer .trace-l .tl-b+.tl-b::before{content:"·";margin:0 6px;opacity:.6}
.answer .trace-l em,.trace-dlg em{font-style:normal;color:var(--honey-ink)}
.answer .trace-l .ic{flex:none;width:15px;height:15px}
.answer.trace-only{margin-top:-6px}
.row-n+.answer.trace-only,.stop-n+.answer.trace-only{margin:-6px 0 0 0}
.trace-dlg{width:min(520px,calc(100vw - 32px))}
.trace-dlg .tr-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.trace-dlg .tr-h h2{margin:0}
.trace-dlg .tr-x{flex:none;margin-right:-6px}
.trace-dlg .tr-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--s2);margin-bottom:var(--s3)}
.trace-dlg .tr-s{display:grid;grid-template-rows:1fr auto;gap:6px;padding:var(--s3);border:var(--edge-s);border-radius:var(--r2);min-width:0}
.trace-dlg .tr-s .mono{font:500 11px/1.25 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);text-wrap:balance}
.trace-dlg .tr-s b{font:700 18px/1.1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.trace-dlg .tr-s.bad{background:var(--honey-wash);border-color:transparent}
.trace-dlg .tr-s.bad b{color:var(--honey-ink)}
.trace-dlg .tr-why{font-size:13.5px;color:var(--ink-2);margin:0 0 var(--s3);text-wrap:pretty}
.trace-dlg .tr-why:empty{display:none}
.trace-dlg .run-err{margin:0 0 var(--s3)}
.trace-dlg .run-err .mono{display:block;margin:0 0 4px;font:500 11px/1.25 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--honey-ink)}
.trace-dlg .tr-note{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.45;color:var(--ink-3);margin:0 0 var(--s3);text-wrap:pretty}
.trace-dlg .tr-note .ic{flex:none;width:14px;height:14px;margin-top:2px}
.trace-dlg .tr-note.bad{color:var(--ink-2)}.trace-dlg .tr-note.bad .ic{color:var(--honey-ink)}
.trace-dlg .tr-k{font:500 11.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);margin:var(--s5) 0 var(--s2)}
.trace-dlg .tr-mem{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s3)}
.trace-dlg .tr-mem .chip{font-weight:600}
.trace-dlg .tr-mem .chip.bad{background:var(--honey-wash);border-color:transparent;color:var(--honey-ink)}
.trace-dlg .tr-tl{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.trace-dlg .tr-tl li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;column-gap:var(--s3);row-gap:5px;align-items:baseline;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.trace-dlg .tr-tl li:last-child{border-bottom:0}
.trace-dlg .tr-at,.trace-dlg .tr-d{font:500 11.5px/1.3 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-3);white-space:nowrap}
.trace-dlg .tr-d{text-align:right}
.trace-dlg .tr-n{font-size:13.5px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.trace-dlg .k-think .tr-n{color:var(--ink-2)}
.trace-dlg .tr-bar{grid-column:2/4;position:relative;height:4px;border-radius:2px;background:color-mix(in srgb,var(--ink) 6%,transparent);overflow:hidden}
.trace-dlg .tr-bar i{position:absolute;top:0;bottom:0;left:var(--l);width:max(3px,var(--w));border-radius:2px;background:var(--terra)}
.trace-dlg .k-think .tr-bar i{background:color-mix(in srgb,var(--ink) 30%,transparent)}
.trace-dlg li.bad .tr-bar i{background:var(--honey)}
@media (max-width:480px){.trace-dlg .tr-sum{grid-template-columns:repeat(2,minmax(0,1fr))}.trace-dlg .tr-tl li{grid-template-columns:48px minmax(0,1fr) auto;column-gap:var(--s2)}}
/* T335: who answers in a sala. The line over the composer says it before the message goes; the header pill says the
   sala's choice and (admin) opens it; the queue under "escrevendo" says who comes next and why. */
.rnext{display:flex;align-items:flex-start;gap:10px;margin:8px 24px 0;font-size:13px;line-height:1.4;color:var(--ink-3);text-wrap:pretty}
.rnext:empty{display:none}
.rnext .ic{flex:none;width:14px;height:14px;margin:2px 2px 0 6px}
.rnext b{color:var(--ink-2);font-weight:700}
.rnext+.composer{margin-top:12px}
.rthread .rnext{margin:8px 14px 0}
.rwork:has(.rqueue){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center;padding:4px 0}
.rwork:has(.rqueue) .btn{grid-column:2;grid-row:1;margin-left:0}
.rwho{display:flex;align-items:center;gap:10px;min-width:0}
.rwork .rfaces{margin:0 2px}
.rqueue{grid-column:1 / -1;margin:0;padding-left:32px;font-size:12.5px;line-height:1.4;color:var(--ink-3);text-wrap:pretty}
.rqueue b{color:var(--ink-2);font-weight:700}
.ansbtn{gap:8px;max-width:340px;cursor:default}
button.ansbtn{cursor:pointer}
button.ansbtn:hover{box-shadow:var(--hard-s);transform:translate(-1px,-1px)}
.ansbtn>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ansbtn .ic{flex:none}
.rdlg .choices.ans{grid-template-columns:1fr;gap:8px;margin-bottom:4px}
.rdlg .choices.ans .choice{padding:12px 16px;gap:4px}
.rdlg .choices.ans .choice.on{padding:11px 15px}
.rdlg .ansp{margin-top:4px}
.rdlg .ansp .lbl{margin-top:8px}
.rdlg .ansf[hidden]{display:none}
.rdlg .ansbox{margin:4px 0 0}
.dlg .dlg-lede{color:var(--ink-2)}
@media (max-width:760px){
  .rnext{margin:8px 12px 0;font-size:12.5px}
  .rthread .rnext{margin:8px 12px 0}
  .chat-h button.pill.ansbtn{display:inline-flex;flex:none;width:38px;height:38px;padding:0;justify-content:center}
  .ansbtn>span,.ansbtn>.ic:not(:first-child){display:none}
  .rdlg .ansp{grid-template-columns:1fr;gap:0}
  .rdlg .ansf:not([hidden])+.ansf .lbl{margin-top:12px}
  /* T335, T197: on the phone every composer (the conversation's, the sala's, a thread's) starts its field at its edge, the
     clip beside Enviar as in a messenger, so the words start 12px in, where Quem responde starts in the sala, and not
     ~70px in after the clip. One rule for both fields. The sala's keeps 12px off the bottom (and the home bar). */
  .composer{padding-left:10px;gap:4px}
  .composer>.msgwrap{order:1}
  .composer>.clip{order:2}
  .composer>.send{order:3;margin-left:4px}
  .composer .msgwrap .input{padding-left:0}
  .rcomp{margin:12px 12px calc(12px + env(safe-area-inset-bottom))}
  .rcomp>.clip{margin-bottom:1px}
  .rnext .ic{margin-left:0}
  .rthread .composer.rcomp{margin:12px 12px calc(12px + env(safe-area-inset-bottom))}
}
.rdlg .ansp+.dlg-note{margin-top:8px}
/* T335: a sala's Threads and Arquivos sit in its header, beside who answers; the badge says what is new in its threads. */
.room-acts{display:inline-flex;align-items:center;gap:8px;flex:none}
.room-acts .btn.icon{position:relative}
/* the pill of who answers is as tall as the two buttons beside it (38px); on the phone the three icons sit 10px apart, like the rest of the header. */
.chat-h .pill.ansbtn{min-height:38px}
@media (max-width:760px){.room-acts{gap:10px}}
.room-acts .rbadge .tbadge{position:absolute;top:-6px;right:-6px;height:16px;min-width:16px;padding:0 4px;font-size:10px;box-shadow:0 0 0 2px var(--chat-h,var(--paper))}
.roda .rbadge{margin-left:auto;flex:none;display:inline-flex}
.roda .rbadge:empty{display:none}

/* T198: busca global, a paleta (Ctrl K / ⌘K, Buscar no trilho, a lupa no topo de cada tela no celular). One frame over any
   screen: the field, the chips of what to look for, the hits grouped by kind. Buscar is a button, never a destination:
   the rail keeps the screen's item lit, only that one. */
.dk-find{border:0;background:transparent;cursor:pointer;font:600 10.5px/1.2 var(--sans)}
.dk-find[aria-expanded="true"]{color:var(--ink)}
.gf-m{display:none}
/* T198D: on a conversation the palette opens 24px under its top bar (gfOpen sets --gf-top), clear of the name and of "livre agora";
   on the other screens 32px from the top, over the page's crumb and title, never 6px under a line of them. */
/* T198E: centred on the screen's panel (gfOpen sets --gf-l and --gf-r to its edges), not on the window. */
.gfind{position:fixed;inset:var(--gf-top,var(--s8)) var(--gf-r,0px) auto var(--gf-l,0px);margin:0 auto;width:min(680px,calc(100vw - var(--gf-l,0px) - var(--gf-r,0px) - 32px));max-height:calc(100dvh - var(--gf-top,var(--s8)) - var(--s12));padding:0;
  flex-direction:column;background:var(--card);color:var(--ink);border:var(--edge);border-radius:var(--r3);box-shadow:var(--hard);overflow:hidden}
.gfind[open]{display:flex}
.gfind::backdrop{background:var(--scrim-find);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.gf-q{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s6);border-bottom:var(--edge-s);flex:none}
.gf-back{display:none}
.gf-in{flex:1;min-width:0}
.gf-in .ic{left:0;color:var(--ink-3)}
.gf-in .input{height:32px;border:0;background:transparent;box-shadow:none;padding:0 0 0 34px;font:500 18px/1.3 var(--sans);color:var(--ink);text-overflow:ellipsis}
.gf-in .input:focus{box-shadow:none}
.gf-in .input::-webkit-search-cancel-button{display:none}
.gf-key{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;font:500 11px/1 var(--mono);color:var(--ink-3);background:var(--paper);border:1.5px solid var(--line-2);border-radius:6px;white-space:nowrap;flex:none}
.gf-scope{display:flex;gap:var(--s2);padding:var(--s3) var(--s6);border-bottom:1px solid var(--line);flex:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.gf-scope::-webkit-scrollbar{display:none}
.gf-chip{flex:none;padding:7px 12px;cursor:pointer}
.gf-chip i{font:600 11.5px/1 var(--sans);font-style:normal;color:var(--ink-3)}
.gf-chip i:empty{display:none}
.gf-chip:hover{background:var(--bear-w)}
.gf-chip.on{background:var(--terra-wash);border-color:var(--terra);color:var(--terra-ink)}
.gf-chip.on i{color:var(--terra-ink)}
.gf-res{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 var(--s2) var(--s4) var(--s3);margin-right:var(--s2);scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}   /* T198E: the bar 8px in from the frame and 8px from the rows */
/* T198E: where the list has more, it fades (24px) under the line above or into the foot: the cut never falls through half a row. */
.gf-res::before,.gf-res::after,.sf-list::before,.sf-list::after{content:"";display:none;position:sticky;z-index:2;height:var(--s6);pointer-events:none}
.gf-res::before,.sf-list::before{top:0;margin-bottom:calc(-1 * var(--s6));background:linear-gradient(var(--card),transparent)}
.gf-res::after,.sf-list::after{bottom:calc(-1 * var(--s4));margin-top:calc(-1 * var(--s6));background:linear-gradient(transparent,var(--card))}   /* sticky stops at the padding: -16px puts it on the foot's line */
.gf-res.fade-t::before,.gf-res.fade-b::after,.sf-list.fade-t::before,.sf-list.fade-b::after{display:block}
.gf-g{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:28px;margin:var(--s4) var(--s3) var(--s2);font:700 11.5px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.gf-more{font:700 12.5px/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--terra-ink);background:none;border:0;padding:var(--s1) 0;cursor:pointer}
.gf-more:hover{text-decoration:underline;text-underline-offset:3px}
.gf-row{display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s2) var(--s3);border-radius:var(--rc);color:var(--ink);text-decoration:none}
.gf-row+.gf-row{margin-top:var(--s1)}
.gf-row[aria-selected="true"]{background:var(--bear-w);box-shadow:inset 0 0 0 1.5px var(--edge-ink)}
.gf-row .av{width:38px;height:38px}
.gf-row .av .m{width:34px;height:34px}
.gf-tile{width:38px;height:38px;border-radius:var(--r1);display:grid;place-items:center;flex:none;box-shadow:0 0 0 1.5px var(--edge-ink);color:var(--ink)}   /* T198D: the contour outside, as on .av: the same box and axis as a face */
.gf-tile.room{background:var(--peri-wash)}
.gf-tile.file{background:var(--rabbit-w)}
.gf-t{flex:1 1 auto;min-width:0;display:grid;gap:3px}
.gf-t b{font:700 14.5px/1.25 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gf-t small{font:400 12.5px/1.35 var(--sans);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gf-t mark{background:var(--d-yel);color:var(--ink);border-radius:2px;padding:0}
.gf-go{flex:none;display:none;align-items:center;gap:6px;padding-left:var(--s3);font:700 12.5px/1 var(--sans);color:var(--ink-2);white-space:nowrap}
.gf-row[aria-selected="true"] .gf-go{display:inline-flex}
.gf-sk{height:56px;border-radius:var(--rc);margin-top:var(--s1)}
.gf-none{margin:var(--s5) var(--s3) 0;font-size:var(--t-sm);line-height:1.5;color:var(--ink-2);max-width:var(--measure);text-wrap:pretty}
.gf-help{margin:var(--s5) 0 0;padding:var(--s3) var(--s3) 0;border-top:1px dashed var(--line-2);font-size:12.5px;line-height:1.5;color:var(--ink-3);text-wrap:pretty}
.gf-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s3) var(--s6);border-top:1px solid var(--line);font:400 12.5px/1.3 var(--sans);color:var(--ink-3);flex:none}
.gf-foot span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.gf-foot b{font-weight:400;margin:0 4px}
.gf-foot span>.gf-key+.gf-key{margin-left:-2px}
@media (prefers-reduced-motion:no-preference){.gf-row,.gf-chip{transition:background var(--dur) var(--ease)}}
@media (max-width:760px){
  /* The lupa: in the header row of Conversas, at the top right of the other screens, on the axis of their first line. */
  .btn.icon.gf-m{display:inline-flex;width:40px;height:40px;flex:none}
  /* Conversas: the lupa closes the first row, after the person's chip, which gives way (ellipsis) to a long name. */
  .home-top .gf-m{margin:-6px -6px -6px 0}
  .home-top .me-chip{min-width:0;flex:0 1 auto}
  .home-top .me-chip>.me-link{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:19px}
  .pane-h{position:relative}
  .pane-h>.gf-m{position:absolute;top:-9px;right:-6px}
  body[data-view="novo"] .btn.gf-m,body[data-view="chave"] .btn.gf-m,body[data-view="start"] .btn.gf-m,body.onboarding .btn.gf-m{display:none}
  /* The sheet takes the whole screen; the chips scroll sideways and the edge that has more fades, so it shows. */
  .gfind{inset:0;width:100%;max-width:none;height:100dvh;max-height:none;border:0;border-radius:0;box-shadow:none;padding-top:env(safe-area-inset-top)}
  .gf-q{padding:var(--s3) var(--s4) var(--s3) var(--s3);gap:var(--s2);border-bottom:0}
  .gfind .gf-back{display:inline-flex;width:44px;height:44px;flex:none}
  .gf-in .ic{left:12px}
  .gf-in .input{height:44px;border:var(--edge-s);background:var(--card);padding:0 12px 0 36px;font:400 16px/1.3 var(--sans)}
  .gf-in .input:focus{border-color:var(--terra);box-shadow:0 0 0 3px var(--terra-wash)}
  .gf-esc,.gf-foot{display:none}
  /* T198D: the line under the chips on the 16px of the cards and the dashed help, not edge to edge. */
  .gf-scope{margin:0 var(--s4);padding:var(--s1) 0 var(--s3);border-bottom:1px solid var(--line)}   /* T198E: the light line of every other divider, not the ink */
  .gf-scope.more-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
  .gf-scope.more-l{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px);mask-image:linear-gradient(to right,transparent,#000 40px)}
  .gf-scope.more-l.more-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
  .gf-chip{padding:0 10px;min-height:40px;display:inline-flex;align-items:center;gap:4px}
  .gf-res{padding:0 var(--s4) calc(var(--s6) + env(safe-area-inset-bottom));margin-right:0;scrollbar-width:none}
  /* T198E: scrolled, the cards slip under a solid 12px band and a 12px fade below the line, never cut on it (half a face showed). */
  .gf-res::before{height:var(--s6);margin-bottom:calc(-1 * var(--s6));background:linear-gradient(var(--card) var(--s3),transparent)}
  .gf-res::after{bottom:calc(-1 * (var(--s6) + env(safe-area-inset-bottom)))}   /* T198D: the touch sheet's bar overlays; a 6px gutter put the cards 6px off the line above */
  .gf-g{margin:var(--s5) 0 var(--s2)}
  .gf-row{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:10px 12px;min-height:60px}
  .gf-row+.gf-row{margin-top:var(--s2)}
  /* T198D: a touch never sees a row picked in advance (Ir on the keyboard still opens the first); the arrows of a keyboard do. */
  .gf-row[aria-selected="true"]{background:var(--card);box-shadow:none}
  .kb .gf-row[aria-selected="true"]{border-color:var(--edge-ink)}
  .gf-row[aria-selected="true"] .gf-go{display:none}
  .gf-sk{height:60px;border-radius:var(--r2);margin-top:var(--s2)}
  .gf-none,.gf-help{margin-left:0;margin-right:0}
  .gf-help{padding-inline:0}
}

/* T198C: the field "Buscar na trupe". Desktop: between the trupe's name and Sua trupe, out of the scroll, 40px tall, and
   the hits drop 16px under it in a card as wide as they need (480px), over the screen. Phone: at the top of Conversas,
   44px, Cancelar 12px to its right once it has the focus; the hits take the place of the conversations. The rows,
   groups and marks are the palette's (.gf-*). */
.sf{display:flex;align-items:center;gap:var(--s3);flex:none;min-width:0}
.sf-in{flex:1 1 auto;min-width:0}
.sf-in .input{height:40px;font-size:var(--t-sm);padding-left:38px;padding-right:var(--s3);text-overflow:ellipsis}   /* the lupa 11px from the words */
.sf-in .input:focus{border-color:var(--terra);box-shadow:0 0 0 3px var(--terra-wash)}   /* T198D: the warm focus of T128, not the owl blue */
.sf-x{display:none}
.home .sf,body[data-dest="config"] .side .sf{display:none}
/* T198D: on the desktop the open list dims the screen and the column under it (the palette's scrim), the field stays lit. */
body.sf-dim::after{content:"";position:fixed;inset:0;z-index:29;background:var(--scrim-find);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none}   /* T198E: dark and soft enough that the bubbles' words cut by the list don't read */
body.sf-dim .sf{position:relative;z-index:31}
.sfres{position:fixed;z-index:30;display:flex;flex-direction:column;background:var(--card);color:var(--ink);border:var(--edge);border-radius:var(--r3);box-shadow:var(--hard);overflow:hidden}
.sf-list{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 var(--s2) var(--s4) var(--s3);margin-right:var(--s2);scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}   /* T198D review 1: 16px to the foot, as the palette's list and as above the first group */
.sf-list .gf-none{margin:var(--s4) var(--s3) var(--s1)}
.sf-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s3) var(--s6);border-top:1px solid var(--line);font:400 12.5px/1.3 var(--sans);color:var(--ink-3);flex:none}
.sf-foot span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sf-foot b{font-weight:400;margin:0 4px}
.sf-foot span>.gf-key+.gf-key{margin-left:-2px}
@media (max-width:760px){
  .home .sf{display:flex;margin-top:var(--s4)}
  .home-h .sf+h1{margin-top:var(--s5)}
  .sf-in .input{height:44px;font-size:16px}
  .sf-in .input::-webkit-search-cancel-button{display:none}
  .sf.act .sf-x{display:inline-flex;height:44px;flex:none}
  /* Searching, Conversas keeps its top row and the field; the hits stand where the greeting and the lists were. */
  .home.sf-on .home-h>:not(.home-top,.sf),.home.sf-on>:not(.home-h,.sfres){display:none}
  .sfres{position:static;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
  .sf-list{padding:0;margin-right:0;overflow:visible}
  .sf-list::before,.sf-list::after{display:none!important}
  /* T198E: the phone's field has the palette's chips 16px under it (12 + their 4), on the page's edges; the line under them is the light one. */
  .sfres .gf-scope{margin:var(--s3) 0 0}
  .sf-list .gf-none{margin:var(--s5) 0 0}
}
/* T198C review 2: "Ver os N" was a 23px target on the phone; it reaches 40px without moving the row of the group's name. */
@media (max-width:760px){.gf-more{min-height:40px;margin:-6px 0;display:inline-flex;align-items:center}}

/* T398: the page of a key link sent in Slack. One member, one key, its fields; the reasons are the empty-state card. */
.keylink .lede{max-width:var(--measure)}
.keylink .kl-who{margin-bottom:calc(var(--s6) - 18px);display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--card);border:var(--edge-s);border-radius:var(--r2)}
.keylink .kl-who .m{width:44px;height:44px;flex:none}
.keylink .kl-who span{display:grid;gap:2px;min-width:0}
.keylink .kl-who small{color:var(--ink-3);font-size:var(--t-sm)}
.keylink .field label code{font:700 13px/1.3 var(--mono);overflow-wrap:anywhere}
.keylink .kl-act{flex-wrap:wrap;align-items:center;column-gap:var(--s3);row-gap:var(--s2)}
.keylink .kl-until{margin:0}
.keylink .formerr:empty{display:none}
.keylink .field .formerr{margin-top:var(--s2)}
.login .kl-login{margin-top:var(--s2);text-align:left}
.keylink .kl-why .btn,.keylink .kl-done .btn{margin-top:var(--s2)}
/* T402: a Slack guest's link, signed out: the code step, then the same fields. The code and Confirm sit on one line, as tall
   as each other; the brand sits on top as on the sign-in. */
/* Signed out there is no sidebar: one column in the middle of the screen, the brand on its left edge above the title. */
.keylink.kl-out{width:100%;max-width:640px;margin-inline:auto}
.keylink.kl-out .kl-brand{display:inline-flex;margin-bottom:var(--s6)}
.keylink .kl-coderow{display:flex;gap:var(--s2);align-items:stretch}
.keylink .kl-coderow .input{flex:1 1 auto;min-width:0;max-width:220px;font:600 20px/1 var(--mono);letter-spacing:.18em;text-align:center}
.keylink .kl-coderow .btn{flex:none;height:auto;align-self:stretch}
.keylink.kl-out .login-langs{margin-top:var(--s8);justify-content:flex-start}
/* The wait, the reasons and done are the centred card of the sign-in: the brand and the languages centre with it. */
.keylink.kl-out.kl-mid{display:flex;flex-direction:column;align-items:center}
.keylink.kl-out.kl-mid .login-langs{justify-content:center}
.keylink.kl-out.kl-mid .empty{margin:clamp(24px,10vh,96px) auto 0}
/* T421: an MCP server added by its address, on Conexões: the form in the side panel, and its address on its card. */
.ownf{margin-top:0;gap:var(--s5)}
.ownf .field{min-width:0}
.ownf .lbl{display:block;margin-bottom:var(--s2)}
.choices.own-auth{grid-template-columns:1fr;gap:var(--s2)}
/* .field label would make each option a block with a 6px tail: the options keep their own flex and an even 8px apart. */
.ownf .choices.own-auth .choice{display:flex;margin-bottom:0;font:inherit;color:inherit;padding:10px 14px}
.ownf .choices.own-auth .choice.on{padding:9px 13px}
.choices.own-auth .choice .ct{font-size:15px}
.own-key{display:grid;gap:var(--s5)}
.own-key[hidden],.ownf .field[hidden],.ownf .input[hidden],.own-cut[hidden]{display:none}
#own-hdrx{margin-top:var(--s2)}
.own-cut{display:flex;align-items:flex-start;gap:10px;color:var(--ink-2)}
.own-cut .ic{flex:none;margin-top:1px}
.own-money{display:flex;align-items:flex-start;gap:10px;margin:0;padding:10px 12px;border:var(--edge-s);border-radius:var(--r2);background:var(--paper-2);font-size:13px;color:var(--ink-2);text-wrap:pretty}
.own-money .ic{flex:none;margin-top:2px}
.ownf .formerr{margin-top:0;min-height:0}
.ownf .formerr:empty{display:none}
.own-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--s2) var(--s4);margin:0;padding:12px 0 0;border-top:1px solid var(--line);font-size:var(--t-sm)}
.own-kv dt{color:var(--ink-3)}
.own-kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
@media (max-width:640px){.own-kv{grid-template-columns:minmax(0,1fr);gap:2px}.own-kv dd+dt{margin-top:var(--s2)}}
.own-kic{background:var(--paper-2);border:var(--edge-s)}
.conn .own-money{margin-top:0}

/* T439: Empresa (Sobre você), in the org's settings. The blocks of a page in the column, one after another on the
   spacing scale; each section of the ficha a card with where it came from under it; the review the current and the new
   side by side (one over the other on the phone); the library a list of rows, name and who sent it, the state, the
   actions. Tokens only. */
.empresa .emp-mem{margin-top:var(--s4)}
.empresa .emp-mem .ic{flex:none;margin-top:2px}
.empresa .vblk{max-width:var(--col);margin-top:var(--s10)}
.empresa .vblk+.vblk,.empresa details+.vblk{margin-top:var(--s10);padding-top:var(--s8);border-top:1px solid var(--line)}
.empresa .vblk-h{margin-bottom:var(--s5)}
.empresa .hint{padding:0;margin:var(--s3) 0 0}
.emp-sk{display:grid;gap:var(--s3);max-width:var(--col);margin-top:var(--s8)}
.emp-secs{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.emp-sec{background:var(--card);border:var(--edge-s);border-radius:var(--r2);padding:var(--s4) var(--s5);display:grid;gap:var(--s3);min-width:0}
.emp-sh{display:flex;align-items:center;gap:var(--s3);min-height:32px}
.emp-sh h3{margin:0;font:700 15px/1.3 var(--sans);flex:1;min-width:0}
.emp-sh .btn{flex:none}
.emp-sv{display:grid;gap:var(--s3)}
.emp-sv .hint,.emp-col .hint{margin:0}
.emp-from{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding-top:var(--s3);border-top:1px dashed var(--line)}
.emp-fl{font:700 11.5px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-right:var(--s1)}
.emp-src,.emp-ed{max-width:100%;font-weight:600;color:var(--ink-2);gap:10px;padding-left:var(--s3)}
.emp-src span,.emp-ed span{overflow:hidden;text-overflow:ellipsis}
.emp-src .ic,.emp-ed .ic{flex:none}
.emp-sf .help{margin:0}
.emp-sf .acts,.emp-ra,.emp-sug .acts{display:flex;gap:var(--s2);flex-wrap:wrap}
.emp-sf .formerr:empty,.empresa .formerr:empty{display:none}
.emp-wait{margin:0 0 var(--s4)!important}
/* The review: Atual and Nova side by side, each with its small label above. */
.emp-review .emp-secs{gap:var(--s4)}
.emp-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.emp-cmp.solo .emp-cols{grid-template-columns:minmax(0,1fr)}
.emp-col{display:grid;gap:var(--s2);align-content:start;min-width:0}
.emp-col.now{background:var(--paper);border-radius:var(--r1);padding:var(--s3)}
.emp-col.now .soul-text{color:var(--ink-2)}
.emp-col textarea{resize:vertical;font:13.5px/1.5 var(--sans);min-height:96px}
.emp-col .emp-from{border-top:0;padding-top:0}
.emp-cl{font:700 11.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3)}
.emp-same{color:var(--ink-3);font-weight:600}
.emp-ra{margin-top:var(--s5)}
#emp-rerr{margin-top:var(--s3)}
/* Versions under the ficha, the same box as a jeito's. */
.empresa .emp-vers{max-width:var(--col);margin-top:var(--s6)}
.emp-old{display:grid;gap:var(--s2);background:var(--paper);border-radius:12px;padding:var(--s3);margin-top:var(--s2);color:var(--ink-2)}
.emp-old p{margin:0;line-height:1.5}
.emp-old b{color:var(--ink)}
/* The library. */
.emp-files{list-style:none;margin:0;padding:0;border:var(--edge-s);border-radius:var(--r2);background:var(--card);overflow:hidden}
.emp-file{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;column-gap:var(--s3);row-gap:var(--s2);padding:var(--s3) var(--s4);min-height:64px}
.emp-file+.emp-file{border-top:1px solid var(--line)}
.emp-fi{width:36px;height:36px;border-radius:10px;background:var(--paper);display:grid;place-items:center;color:var(--ink-2)}
.emp-fm{display:grid;gap:2px;min-width:0}
.emp-fm b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emp-fm small{color:var(--ink-3);font-size:12.5px}
.emp-st{font-weight:600;color:var(--ink-2)}
.emp-st.st-read{background:var(--sage-wash);color:var(--rabbit-ink);border-color:var(--edge-ink)}
.emp-st.st-unread{background:var(--honey-wash);color:var(--honey-ink);border-color:var(--edge-ink)}
.emp-fa{display:flex;gap:var(--s2)}
.emp-used{margin-top:var(--s3)!important}
#emp-lok{margin:var(--s3) 0 0}
#emp-lok:empty{display:none}
/* Adding material. */
.emp-form{display:grid;gap:var(--s5);margin:0}
.emp-form .field{display:grid;gap:var(--s2);margin:0}
.emp-form .field>label,.emp-form .lbl{font-weight:600;font-size:14px;margin:0}
.emp-form .help{margin:0}
.emp-form textarea{resize:vertical;font:14px/1.5 var(--sans);min-height:120px}
.emp-sites{display:grid;gap:var(--s2)}
.emp-more{justify-self:start}
.emp-pick{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.emp-picked{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.emp-picked li{display:inline-flex;align-items:center;gap:var(--s1);min-width:0}
.emp-picked .chip span{max-width:220px;overflow:hidden;text-overflow:ellipsis}
.emp-form .acts{display:flex;gap:var(--s2);flex-wrap:wrap}
.emp-run{display:grid;gap:var(--s4)}
.emp-step{display:flex;align-items:center;gap:var(--s3);margin:0;font-weight:600}
.emp-step .bdots{position:static}
.emp-rs{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.emp-rs li{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-width:0}
.emp-rsn{min-width:0;display:flex}
/* Suggestions after the first ficha. */
.emp-sh3{margin:var(--s5) 0 var(--s2);font:700 13px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.emp-sugl{list-style:none;margin:0;padding:0;border:var(--edge-s);border-radius:var(--r2);background:var(--card)}
.emp-sugl li{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s3) var(--s4);min-height:56px}
.emp-sugl li+li{border-top:1px solid var(--line)}
.emp-sm{display:grid;gap:2px;min-width:0}
.emp-sm small{color:var(--ink-3);font-size:12.5px;line-height:1.4}
.emp-sm .emp-pain{color:var(--ink-2)}
.emp-sugl .netsw,.emp-sugl .btn,.emp-made{flex:none}
.emp-sug .acts{margin-top:var(--s4)}
.emp-none .btn{margin-top:var(--s1)}
@media (max-width:760px){
  .empresa .vblk{margin-top:var(--s8)}
  .empresa .vblk+.vblk,.empresa details+.vblk{margin-top:var(--s8);padding-top:var(--s6)}
  .emp-sec{padding:var(--s4)}
  .emp-cols{grid-template-columns:minmax(0,1fr)}
  .emp-file{grid-template-columns:auto minmax(0,1fr) auto;padding:var(--s3) var(--s4);align-items:center}
  .emp-fm{grid-column:2/-1}
  .emp-file .emp-st{grid-column:2;grid-row:2;justify-self:start}
  .emp-fa{grid-column:3;grid-row:2}
  .emp-fa .btn span{display:none}
  .emp-sugl li{flex-wrap:wrap}
  .empresa .pane-h>div{flex:1 1 100%}
  .empresa .pane-h{row-gap:var(--s4)}
}