/* A pele do sanctus: um arquivo, duas aplicações. * * O yin roda na plataforma e o yang dentro do ambiente da pessoa — processos diferentes, hosts * diferentes, um deles sem privilégio nenhum. Mas quem clica em "abrir ambiente" não deveria * sentir que trocou de programa; deveria sentir que trocou de página. Por isso a folha vive no * `contrato`, o mesmo lugar onde moram os tipos que os dois precisam concordar: estilo aqui é * contrato como qualquer outro, e divergir dele é um defeito, não uma questão de gosto. * * Os dois embutem estes bytes em tempo de compilação e servem cada um o seu `/estilo.css`. Nada * de o yang buscar a folha no yin: o painel de dentro tem que continuar legível com a plataforma * fora do ar, e uma página sem estilo por causa de um proxy caído é exatamente o pânico que o * desenho promete não causar. * * O escuro é o tema primário — é onde quem desenvolve mora — e o claro continua inteiro no media * query. Os ícones das ações de linha também moram aqui, como máscaras em data-URI pintadas com * `currentColor`: ícone é vocabulário visual, e vocabulário compartilhado é contrato. * * A MESA do yang — a casca em `/` — tem folha própria, `mesa.css`, carregada por cima desta e * servida só pelo yang (sanctus#173). Aqui fica o que as telas dos dois lados escrevem; lá, o * que só a mesa desenha. A PORTA do yin — as cinco caras da entrada — tem `porta.css`, pela mesma * forma e servida só pelo yin (sanctus#245). * * OS TOKENS SÃO DO SANCTUS INTEIRO (sanctus#245). O redesenho da entrada trocou a paleta e as três * letras, e elas entraram AQUI, não numa folha de um lado só: a arquiteta propôs um conjunto de * tokens próprio para o yin, e um vocabulário de cor que vale de um lado é exatamente a divergência * que esta folha existe para impedir. A Área de Trabalho muda de cor e de letra junto, e isso foi * aceito de olhos abertos — com print antes e depois, no PR. */ /* ─── as três letras ───────────────────────────────────────────────────────── * Embutidas e servidas pelos DOIS lados (`/fontes/.woff2`), pela mesma razão da folha: o * painel de dentro precisa continuar legível com a plataforma fora do ar, e letra buscada lá fora * seria a folha de novo, agora em bytes maiores. * * `font-display:swap` e uma pilha de reserva de verdade em cada token: sem rede — ou com a rota * fora do ar — a página inteira continua desenhada, com outra letra e o mesmo leiaute. É caso da * issue, e é medido. * * Só o subconjunto `latin` (U+0000–00FF e companhia): o português inteiro cabe nele, e o * `latin-ext` dobraria os bytes para desenhar alfabeto que nenhuma tela desta casa escreve. */ @font-face { font-family:"Fraunces"; font-style:normal; font-weight:400 500; font-display:swap; src:url("/fontes/fraunces.woff2") format("woff2"); } @font-face { font-family:"Figtree"; font-style:normal; font-weight:400 600; font-display:swap; src:url("/fontes/figtree.woff2") format("woff2"); } @font-face { font-family:"DM Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("/fontes/dm-mono-400.woff2") format("woff2"); } @font-face { font-family:"DM Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("/fontes/dm-mono-500.woff2") format("woff2"); } :root { color-scheme: dark light; /* Chão azul-ardósia (fora, frio) e uma peça quente por cima — a porta. Verde é «de pé», âmbar é «em movimento», «guardado» e «atrasado», rosa é perigo. `--acento-tinta` é o que se escreve EM CIMA do acento: o acento agora é claro, e texto branco sobre ele dá 1,9:1. */ --fundo:#131620; --tinta:#ede9e0; --suave:#9ba1af; --apagado:#6a7080; --linha:#2a3040; --caixa:#1a1e2a; --eleva:#222736; --acento:#efa976; --acento-tinta:#1a120b; --perigo:#e57f7f; --vivo:#7fd1a3; --morno:#e6b45a; /* A FAÍSCA DO CLAUDE (sanctus#272). Ela é a única cor desta paleta que não diz estado: diz de QUEM é o ícone, e por isso não se mistura com `--acento`, que é o que a casa usa para chamar atenção. O ponto do canto é que fala o estado do agente; a faísca é laranja em todos eles, inclusive desligado. Token na folha COMUM, e não numa de um lado só — é a regra da #245. */ --claude:#d97757; /* Fraunces na palavra e nos títulos, Figtree no que se lê e se clica, DM Mono no que é dado — pulso, versão, verbo, hora. A reserva de cada uma desenha a página sem rede. */ --display:"Fraunces",Georgia,"Times New Roman",serif; --ui:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace; } /* O TEMA CLARO SAIU DO PROTÓTIPO COM QUATRO CORES ACIMA DO PISO DE CONTRASTE (medido na * sanctus#245, caso 11 da issue: ≥ 4,5:1 em todo texto, nos dois temas). As quatro foram * escurecidas o mínimo para passar, mantendo o matiz: * * --acento #c4652e → #a8501f a tinta do botão cheio sobre ele media 3,80 → 5,30 * --vivo #2f8f5e → #227a4b «de pé» sobre o cartão media 3,96 → 5,20 * --morno #a9781c → #8a6110 «recriar» atrasado e o rótulo do aviso mediam 3,83 → 5,41 * --suave #6b7080 → #5f6472 o «sair» sobre o chão media 4,38 → 5,24 * * O escuro passou inteiro na primeira medição (o pior foi 6,08) e não mudou. */ @media (prefers-color-scheme: light) { :root { --fundo:#f4f1ea; --tinta:#1c1e26; --suave:#5f6472; --apagado:#9a9fab; --linha:#e1dbd0; --caixa:#fffdf8; --eleva:#f9f6f0; --acento:#a8501f; --acento-tinta:#fff8f2; --perigo:#b5453f; --vivo:#227a4b; --morno:#8a6110; /* O laranja do escuro sobre a barra clara mede 2,1:1 e some. Este é o mesmo matiz escurecido até passar o piso de 3:1 dos objetos gráficos (sanctus#272). */ --claude:#c2562f; } } * { box-sizing: border-box; } /* `[hidden]` VENCE QUALQUER `display` DA FOLHA, e é regra de uma linha que já custou duas telas. * * A folha do navegador desenha `[hidden] { display:none }` com a especificidade mais baixa que * existe, então QUALQUER regra nossa com `display` a atropela — e o elemento com o atributo posto * continua na tela, calado. Aconteceu na tela de controle do yin, onde `.botao` trazia * `display:inline-flex` e os dois botões apareciam; e de novo na sanctus#245, onde * `dialog.confirma label { display:block }` deixou o campo «digite seu login» aparecer na * confirmação do «recriar container», que não pede login nenhum. O `!important` aqui é o lugar * certo dele: atributo de estado não se discute com folha de estilo. */ [hidden] { display:none !important; } body { margin:0; background:var(--fundo); color:var(--tinta); font:16px/1.55 var(--ui); } main { max-width: 44rem; margin: 0 auto; padding: 3rem 1.5rem 6rem; } h1 { font-family:var(--display); font-weight:500; font-variation-settings:"opsz" 72; font-size:1.5rem; line-height:1.25; margin:0 0 .4rem; letter-spacing:-.015em; } h2 { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--suave); margin:2.4rem 0 .75rem; font-weight:600; } p { margin:.5rem 0 1rem; } .suave { color:var(--suave); } /* A ETIQUETA: um item de lista curta que se remove com um clique. Nasceu para os pacotes de sistema do ambiente (§6.4) e mora aqui, e não no yang, porque a folha é uma só para as duas telas — a segunda cópia de um estilo é como as duas peles começam a divergir. O `×` fica apagado até o ponteiro chegar: remover é ação, e ação que se anuncia sozinha compete com o conteúdo. */ .etiqueta { display:inline-block; padding:.1rem .45rem; margin:.15rem .2rem .15rem 0; border:1px solid var(--linha); border-radius:.6rem; font-size:.85em; white-space:nowrap; } .etiqueta a { text-decoration:none; opacity:.5; margin-left:.15rem; } .etiqueta a:hover { opacity:1; color:var(--perigo); } code, .mono { font-family:var(--mono); font-size:.88em; } a { color:inherit; text-decoration-color:var(--suave); text-underline-offset:3px; } :focus-visible { outline:2px solid var(--acento); outline-offset:2px; border-radius:4px; } /* O subtítulo logo abaixo do h1 — os fatos de uma linha do item que dá nome à tela. */ .sub { color:var(--suave); margin:.15rem 0 1.6rem; font-size:.92rem; } .cartao { background:var(--caixa); border:1px solid var(--linha); border-radius:12px; padding:1.25rem 1.4rem; } .cartao + .cartao { margin-top:.6rem; } /* Cartão que encaminha: a listagem resume aqui e a tela do item detalha lá. */ .cartao-link { display:block; color:inherit; text-decoration:none; cursor:pointer; transition:border-color .15s ease; } .cartao-link:hover, .cartao-link:focus-visible { border-color:var(--suave); } .cartao-link .abre { margin-left:auto; color:var(--suave); font-size:.9rem; flex:none; } /* A cabeça (a linha de cima das telas de chegada) e o topo compacto (telas de trabalho). * Identidade é moldura: nas telas do dia-a-dia ela ocupa uma linha, não um pódio. * * A cabeça virou a LINHA DA PORTA na sanctus#245 — a marca de um lado, a pessoa do outro, nada no * meio. O que ela carrega dentro (a marca, a cápsula da pessoa) é só da entrada, e por isso mora * em `porta.css`; a linha em si fica aqui, que é onde as duas telas a escrevem. */ .cabeca { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; } .cabeca img { width:42px; height:42px; border-radius:50%; } .cabeca .quem { font-weight:600; } .cabeca .onde { margin-left:auto; font-size:.85rem; color:var(--suave); } .topo { display:flex; align-items:center; gap:.6rem; margin-bottom:1.8rem; font-size:.9rem; flex-wrap:wrap; min-height:2rem; } .topo img { width:24px; height:24px; border-radius:50%; } .topo .quem { font-weight:600; } .topo .direita { margin-left:auto; display:flex; align-items:center; gap:1.1rem; color:var(--suave); font-size:.85rem; flex-wrap:wrap; } /* A volta contextual da tela de item para a listagem. */ .volta { display:inline-flex; align-items:center; gap:.4rem; color:var(--suave); font-size:.88rem; text-decoration:none; } .volta:hover { color:var(--tinta); } button, .botao { font:inherit; font-weight:550; cursor:pointer; border-radius:9px; border:1px solid var(--linha); background:var(--caixa); color:var(--tinta); padding:.6rem 1.1rem; display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; transition:border-color .15s ease, background-color .15s ease; } button:hover, .botao:hover { border-color:var(--suave); } button[disabled] { opacity:.5; cursor:progress; } .principal { background:var(--tinta); color:var(--fundo); border-color:var(--tinta); } .perigo { color:var(--perigo); border-color:color-mix(in srgb, var(--perigo) 35%, var(--linha)); } /* Botão de linha: o mesmo desenho, na escala de quem mora dentro de um cartão. A ESCALA É DELE, A TINTA NÃO (sanctus#218): `.miudo` vem depois de `.principal` na folha, e enquanto apagava o fundo de todo mundo apagava o do principal também — texto `--fundo` sobre transparente, escuro no escuro, contraste 1,1:1. Aconteceu duas vezes: no botão da pastilha de processo (#206, remendado em `mesa.css`) e no «voltar para o yin» do rodapé do início (#202). O `:not` é a raiz: quem pediu tinta continua com tinta, em qualquer ordem de classes no atributo. */ .miudo { padding:.35rem .8rem; } .miudo:not(.principal) { background:transparent; } .acoes { display:flex; flex-wrap:wrap; gap:.6rem; } /* ─── ícones ───────────────────────────────────────────────────────────────── * Máscara + `currentColor`: o ícone herda a cor do botão — inclusive a de perigo — sem uma * segunda fonte de verdade de cor. Todo botão de ícone LEVA `title` e `aria-label`: o desenho * economiza espaço, nunca o nome da ação. */ .icone { width:2.1rem; height:2.1rem; padding:0; justify-content:center; background:transparent; border-radius:8px; flex:none; } .icone::before { content:''; width:1rem; height:1rem; background:currentColor; -webkit-mask:var(--svg) center / contain no-repeat; mask:var(--svg) center / contain no-repeat; } .ico-abrir { --svg:url("data:image/svg+xml,"); } .ico-reiniciar { --svg:url("data:image/svg+xml,"); } .ico-parar { --svg:url("data:image/svg+xml,"); } .ico-copiar { --svg:url("data:image/svg+xml,"); } .ico-baixar { --svg:url("data:image/svg+xml,"); } .ico-remover { --svg:url("data:image/svg+xml,"); } /* ⚠️ `.ico-log` SAIU na sanctus#456, com a ferramenta Processos que era a única a escrevê-lo. Ele * eram três traços — a lista de linhas —, e nunca esteve na `BIBLIOTECA` de «trocar ícone», então * ninguém o escolheu para outra ferramenta. Uma máscara sobrevivente numa folha compartilhada é * desenho esperando um `class=ico-log` que ninguém vai escrever de propósito. */ /* A SAÍDA (sanctus#249): uma seta atravessando o vão de uma porta aberta. Ela NÃO é o botão de * energia — na Área de Trabalho o «voltar para o yin» é desligar a estação, e aqui se encerra a * sessão. Dois desenhos, dois significados, e o desenho é o que os separa antes do rótulo. */ .ico-sair { --svg:url("data:image/svg+xml,"); } /* O aceno de "feito": a classe troca o traço e a cor do próprio botão por um instante — * especificidade de duas classes vence o `.ico-*` de uma. */ .icone.feito { --svg:url("data:image/svg+xml,"); color:var(--vivo); } dl.dados { display:grid; grid-template-columns:auto 1fr; gap:.35rem 1.5rem; margin:0; } dl.dados dt { color:var(--suave); } dl.dados dd { margin:0; overflow-wrap:anywhere; } /* A linha de um item vivo — aplicação, repositório — dentro de um cartão. */ .linha { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; } .cresce { flex:1; min-width:12rem; } /* As abas de seleção dentro de uma tela de item: a listagem resume, a selecionada detém a * atenção. `aria-current` é o que diz quem está aberta — estado mora em atributo, não em cor. * * AS DUAS FORMAS DE DIZER QUEM ESTÁ ABERTA (sanctus#245). A mesa escreve `aria-current`; a área de * abas da entrada é um `role="tablist"` de verdade, e ali o atributo do padrão é `aria-selected`. * A folha atende os dois, porque quem decide é a semântica da tela, não a cor. Antes a selecionada * pegava contorno de `--tinta`; agora pega o acento — é a mesma cor que a porta usa para «aqui se * age», e é ela que amarra a entrada e a estação no mesmo vocabulário. * * A GEOMETRIA DE CADA GRUPO É DE QUEM O MONTA. Aqui a aba é uma pastilha que ocupa o que precisa; * a área de três abas da entrada — cada uma esticada, com sublinhado — é `porta.css`. Esticar a * aba nesta folha deformaria as abas de aplicação da mesa, que se arrastam para a barra * (`.aba.arrastando`, `.fantasma`), e isso não é mudança de cor: é relayout do que esta issue não * mediu. */ .abas { display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 .8rem; } .aba { display:inline-flex; align-items:center; gap:.55rem; padding:.45rem 1rem; border:1px solid var(--linha); border-radius:9px; cursor:pointer; font:inherit; font-weight:550; background:transparent; color:var(--suave); transition:border-color .15s ease, background-color .15s ease, color .15s ease; } .aba:hover { border-color:var(--suave); color:var(--tinta); } .aba[aria-current="true"], .aba[aria-selected="true"] { border-color:var(--acento); background:var(--caixa); color:var(--tinta); } .ok { color:var(--vivo); } .falhou { color:var(--perigo); } .pulado { color:var(--suave); } /* A bolha de estado. Verde é "está de pé agora", e por isso ela precisa da tela que se atualiza * sozinha: bolha verde em foto velha é a mentira mais cara que uma tela dessas conta. O pulso * animado é a mesma promessa dita em movimento — e respeita quem pediu menos movimento. */ .bolha { display:inline-block; width:.55rem; height:.55rem; border-radius:50%; background:var(--suave); flex:none; } .bolha.no-ar { background:var(--vivo); animation:bolha-viva 2.6s ease-out infinite; } .bolha.falhando { background:var(--perigo); } .bolha.subindo, .bolha.morno { background:var(--morno); } @keyframes bolha-viva { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--vivo) 40%, transparent); } 70%, 100% { box-shadow:0 0 0 .45rem transparent; } } @media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } } /* A `.status-linha` saiu na sanctus#245. Ela era da tela de controle do yin — bolha + fatos sob o título —, e a porta diz a mesma coisa em `.fatos`, dentro da peça (`porta.css`). Nenhum dos dois lados a escrevia além dali; há teste provando a ausência. */ pre { background:var(--eleva); border:1px solid var(--linha); border-radius:9px; padding:.7rem .9rem; overflow:auto; max-height:16rem; font-size:.8rem; margin:.6rem 0 0; } /* A caixa de log, com a barra de ações colada em cima do texto. Copiar e baixar moram ali porque * é quando o log é longo que eles fazem falta — e é justamente aí que selecionar com o mouse numa * caixa que se atualiza sozinha a cada cinco segundos não funciona. */ .log { margin-top:.7rem; } .log > .linha { font-size:.85rem; } /* Rastro de pilha não tem quebra de linha própria; sem isto ele sai da caixa pela direita e a * mensagem que interessa fica fora da tela. */ .log pre, .cartao > pre { white-space:pre-wrap; word-break:break-word; } .vazio { color:var(--suave); font-style:italic; } /* A dobra: o que continua a um clique sem disputar o espaço nobre — catálogo, ficha, trilha. */ details.dobra > summary { cursor:pointer; color:var(--suave); font-size:.9rem; padding:.55rem .2rem; border-radius:8px; list-style-position:outside; } details.dobra > summary::marker { color:var(--linha); } details.dobra[open] > summary::marker { color:var(--suave); } details.dobra > summary:hover { color:var(--tinta); } details.dobra[open] > summary { color:var(--tinta); } details.dobra > .corpo { padding:.5rem 0 .3rem; } /* A `.zona-perigo` — a caixa à parte do irreversível — DISSOLVEU na sanctus#245: as duas ações que moravam nela (destruir container, apagar tudo) viraram a aba «ações» da entrada, em rosa tracejado, cada uma com a linha que diz o que ela toca. Ela era escrita só pela tela de controle do yin, e sai da folha com a tela; a `.aviso` (a barra de acento à esquerda) saiu junto, pelo mesmo motivo — o aviso de versão atrasada agora é `.atraso`, em `porta.css`. Há teste provando que nenhum dos dois lados escreve nenhuma das duas. */ .rodape { margin-top:3.5rem; padding-top:1.2rem; border-top:1px solid var(--linha); font-size:.85rem; color:var(--suave); display:flex; justify-content:space-between; gap:1rem; align-items:center; flex-wrap:wrap; } /* ─── arrastar a aplicação para a esquerda ─────────────────────────────────── * O gesto roda em `pointer events`, e não no arrastar-e-soltar do HTML: o painel vive DENTRO de um * quadro e a mesa está no documento de fora, e arrastar entre documentos não é coisa com que se * possa contar. Com ponteiro, o gesto é inteiro daqui — o painel avisa a casca por mensagem, e a * casca fixa a aplicação na barra. */ /* QUEM ACOMPANHA O PONTEIRO É O FANTASMA, e não a aba. A primeira versão deslizava a própria aba com `translateX`, limitada a 84px: o ponteiro seguia e o botão parava, então o gesto parecia travado justamente enquanto dava certo. E mexer na aba de verdade reorganizaria a lista por causa de um gesto que talvez seja cancelado. */ .aba.arrastando { cursor:grabbing; user-select:none; opacity:.35; } .fantasma { position:fixed; z-index:60; margin:0; /* Sem isto ele rouba o `pointerup` de quem o está arrastando, e o gesto nunca termina. */ pointer-events:none; box-shadow:0 .5rem 1.4rem rgb(0 0 0 / .35); opacity:.92; } .fantasma.vai-fixar { border-color:var(--acento); color:var(--acento); } .dica-atalho { color:var(--suave); font-size:.82rem; margin:.1rem 0 .9rem; } .dica-atalho b { font-weight:600; color:var(--tinta); } /* ─── o sino: as notificações da forja, na própria ferramenta (sanctus#139) ───────────────── Desenhado pela pele porque o cliente é o mesmo nos dois lados (`contrato/pele/notificacao.js`). Fixo no canto no yin, que é página comum; na casca do yang ele monta na bandeja da mesa (`data-alvo`), e as regras `.bandeja .sino…` de `mesa.css` o tiram do canto. Acima da barra de status do editor (22px), para não cobrir o que ela mostra. */ .sino { position:fixed; right:1rem; bottom:2.2rem; z-index:60; font-size:.9rem; } .sino-botao { position:relative; width:2.4rem; height:2.4rem; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--caixa); border:1px solid var(--linha); color:var(--suave); opacity:.75; cursor:pointer; } .sino-botao:hover, .sino-botao[aria-expanded="true"] { opacity:1; color:var(--tinta); border-color:var(--suave); } /* A CONTA MORA DENTRO DO CORPO DO SINO (sanctus#316). A pastilha do canto saiu inteira — fundo, anel, raio e canto —, e com ela o impasse que estava escrito na folha da mesa desde a #274: 12 px de pastilha cobrem o glifo, 9 px viram borrão, e não há tamanho que resolva, porque ela disputa o canto com o desenho. Dentro do corpo não há disputa. ⚠️ O DESENHO PREENCHE A CAIXA, e isto não é arredondamento: a faixa da conta é uma PORCENTAGEM da caixa do `.icone`, e ela só cai sobre o corpo do sino se caixa e desenho forem a mesma coisa. Com o `1rem` que `.icone::before` desenha por padrão dentro de uma caixa de 1,5 rem, a faixa ficaria 33 % maior que o sino e o número sentaria abaixo do corpo. */ .sino-botao .icone { position:relative; display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem; } .sino-botao .icone::before { width:1.5rem; height:1.5rem; } /* A FAIXA DO CORPO, em porcentagem do ícone: no viewBox de 16 o corpo vai de 3 — o alto do arco, `cy=7 r=4` — a 12,5, o pé (`11` mais o `1.5` da aba). São 19 % de topo e 59 % de altura, e o `grid` centra o número nelas. A TINTA É A DO CHÃO, e não o cinza do contorno: `--suave` sobre `--morno` mede 1,58:1 no escuro e 1,77:1 no claro — abaixo até do piso de 3:1 dos objetos gráficos (#272). `--fundo` passa o piso de texto de 4,5:1 (#245) nos dois temas sem token novo (8,87:1 e 6,54:1), porque o chão inverte junto com o dourado. ⚠️ A FONTE É 36 % DA LARGURA DO ÍCONE, e o literal é um por folha: 8,6 px a 1,5 rem aqui, 7,5 px a 1,3 rem na bandeja (`mesa.css`). Mudou uma caixa, o número dela sai da mesma conta. */ .sino-botao .conta { position:absolute; left:0; right:0; top:19%; height:59%; display:grid; place-items:center; line-height:1; font-size:8.6px; font-weight:700; color:var(--fundo); } /* `+9` é o único texto que disputa a largura do corpo — o vão do sino na altura do número tem 8 px de 16, e `+9` a 7,5 px negrito pede uns 9. O aperto é SÓ dele: com um dígito só, o vão que sobraria à direita da letra tiraria o glifo do meio do sino. Quem escreve a classe é `pintar`, no mesmo lugar em que decide o `+9`. */ .sino-botao .conta.teto { letter-spacing:-.04em; } /* ⚠️ O RAIO É UM LITERAL SÓ, E É ESTE (sanctus#412). Na bandeja da mesa o painel abre COLADO à barra, e os dois cantos do lado dela vão a zero — `mesa.css` escreve os quatro cantos de novo, uma vez por aresta, e lê o número daqui. Uma segunda cópia do `8px` lá é como os dois lados do sino passam a ter raios diferentes sem nada falhar. Fora da mesa nada disto acontece: sem bandeja não há a que colar, e aqui o painel segue com os quatro cantos curvos e os 2,9 rem que o descolam do botão no canto da página. */ .sino-painel { --raio-painel:8px; position:absolute; right:0; bottom:2.9rem; width:min(24rem, calc(100vw - 2rem)); max-height:min(28rem, 70vh); overflow:auto; background:var(--caixa); border:1px solid var(--linha); border-radius:var(--raio-painel); padding:.6rem .8rem; box-shadow:0 8px 28px rgba(0,0,0,.35); } .sino-cabeca { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.4rem; } .sino-cabeca .miudo { padding:.15rem .5rem; font-size:.78rem; } .sino-permissao { margin:.2rem 0 .6rem; font-size:.82rem; } .sino-lista { list-style:none; margin:0; padding:0; } .sino-item { padding:.45rem 0; border-top:1px solid var(--linha); display:flex; flex-direction:column; gap:.2rem; } .sino-item a { color:var(--tinta); text-decoration:none; } .sino-item a:hover { text-decoration:underline; } .sino-item.lida a { color:var(--suave); } .sino-item .miudo { font-size:.78rem; display:flex; align-items:center; gap:.4rem; } .sino-item button.miudo { padding:.05rem .45rem; margin-left:auto; } /* O sino, como os outros ícones: máscara pintada com `currentColor`. */ .ico-sino { --svg:url("data:image/svg+xml,"); } /* E O SINO CHEIO (sanctus#316): o MESMO corpo, com `fill`, e o badalo continua em traço. É ele que dá fundo ao número sem uma pastilha por cima do desenho — o corpo pintado é a pastilha. ⚠️ UM DESENHO, UM LUGAR. A classe existe por si, como todo ícone da casa, e a regra de estado logo abaixo a empresta pela lista de seletores em vez de copiar a `url()`: duas cópias do mesmo `path` é como os dois lados do sino divergem sem nada falhar. */ .ico-sino-cheio, .sino-botao.com-conta .icone { --svg:url("data:image/svg+xml,"); } /* O DOURADO NÃO APAGA NO HOVER, e não por especificidade: `.bandeja .sino-botao:hover` pinta o BOTÃO, e a cor que o `.icone` lia era HERANÇA. Declaração no próprio elemento vence herança qualquer que seja o peso do seletor de cima — então com conta o hover muda só o fundo do botão, e o sino continua `--morno`. É o único dourado da paleta, e ele inverte com o tema. */ .sino-botao.com-conta .icone { color:var(--morno); } /* O quadro (sanctus#164) morava aqui enquanto era tela do yin. Desde a sanctus#203 ele é ferramenta da MESA, desenhada pela casca, e o vocabulário dele mudou para `mesa.css` — a pele comum volta a ser só o que os dois lados escrevem. */