/*
 * JANELA — Correio
 *
 * Cartas com anexo: lidas/não lidas, botão de resgatar. Diálogo de shim — o
 * DOM é o `.cor` do jogo (`www/correio/index.js`, fora do escopo desta folha).
 *
 * ── O QUE ESTAVA ERRADO ANTES DESTA VERSÃO ─────────────────────────────
 * · `.cor` (o pano de fundo do shim, z-index 70) pintava um véu preto de
 *   72% POR CIMA do chrome inteiro do kit — cabeçalho, ícone, X — porque um
 *   diálogo de shim tem véu próprio e o kit também tem o dele. Dois véus.
 * · `.cor__caixa` trazia cabeçalho PRÓPRIO ("CORREIO" maiúsculo + envelope +
 *   X) por cima do cabeçalho do CHROME ("Correio" + envelope + X). Dois
 *   cabeçalhos, dois X — e só um dos dois X funcionava de verdade (ver
 *   `correio.js`: o X do chrome ficou mudo até o `aoFechar` ser ligado).
 * Aqui o véu do shim é neutralizado (o do kit já escurece a cena) e o
 * cabeçalho interno perde o que duplica o chrome, sobrando só o que ele tem
 * de novo: o rótulo da vista e o botão "Escrever".
 *
 * ── COMO ESCREVER AQUI ────────────────────────────────────────────────
 * · prefixo obrigatório `html[data-rpgw='correio']`;
 * · toda medida em `calc(Npx * var(--rpg-un, 1))`;
 * · cor só dos tokens (`--rpg-tinta`, `--rpg-ouro`, …) — ver CONTRATO.md;
 * · UM botão dourado por vista: "Receber" na carta expandida (lista) e
 *   "Enviar" na folha de escrever nunca aparecem ao mesmo tempo, então os
 *   dois podem usar `.cor__btn` puro (dourado); "Escrever" e "Voltar" são
 *   ação secundária e usam os modificadores `--pequeno`/`--fraco` (fantasma).
 *
 * Validar com:
 *   node ferramentas/foto.mjs correio
 *   node ferramentas/inspetor-janela.mjs correio
 */

/* ── o véu do shim, neutralizado ─────────────────────────────────────
   `.cor` continua fixed/inset:0 para o clique-fora-fecha da lógica própria
   dele seguir funcionando, mas sem pintar um segundo escurecedor por cima
   do chrome — quem escurece a cena é `.rpgw__veu`. */
html[data-rpgw='correio'] .cor {
  background: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

/* ── a caixa: o kit já a fixa no vão (`.rpgw-conteudo`); aqui é o miolo ── */
html[data-rpgw='correio'] .cor__caixa {
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  gap: calc(8px * var(--rpg-un, 1));
  padding: calc(12px * var(--rpg-un, 1)) calc(14px * var(--rpg-un, 1));
}
/* As cantoneiras douradas de canto-reto são a moldura do POP-UP antigo
   (`identidade/styles.css`) — o quadro do kit já é a moldura desta janela,
   arredondada; duas molduras de desenho diferente encaixadas ficam
   "emendadas". */
html[data-rpgw='correio'] .cor__caixa::before,
html[data-rpgw='correio'] .cor__caixa::after {
  content: none !important;
}

/* ── cabeçalho interno: só sobra o que o chrome não tem ──────────────
   ícone e X duplicam o chrome — saem. O `h2` vira o rótulo da vista atual
   ("Correio" / "Escrever carta"), pequeno e com fio dourado, como um
   `.rpg-secao`; sem isso a régua de topo ficava só com o botão flutuando. */
html[data-rpgw='correio'] .cor__topo img,
html[data-rpgw='correio'] .cor__x {
  display: none !important;
}
html[data-rpgw='correio'] .cor__topo {
  flex: 0 0 auto;
  gap: calc(8px * var(--rpg-un, 1));
}
/* 🚨 `identidade/styles.css` pinta TODO `.cor__topo h2` com texto em
   degradê (`background-clip:text` + `color:transparent`) e fonte serifada,
   tudo em `!important` — é o mesmo utilitário que dá título a Convite,
   Ranking e Deusa. Sem bater `!important` propriedade por propriedade aqui,
   o rótulo continua saindo na fonte e no degradê do desenho antigo por
   baixo de qualquer coisa que eu escrever sem `!important`. */
html[data-rpgw='correio'] .cor__topo h2 {
  flex: 1 1 auto;
  gap: 0;
  white-space: nowrap;
  font-family: 'Baloo 2', system-ui, sans-serif !important;
  font-size: clamp(9px, calc(13px * var(--rpg-un, 1)), 17px);
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  color: var(--rpg-ouro) !important;
  -webkit-text-fill-color: var(--rpg-ouro) !important;
  -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
  filter: none !important;
}
/* `h2` continua `display:flex` (herdado da folha original, para o ícone que
   escondemos ficar fora do fluxo) — o fio precisa ser um ITEM flexível
   (`flex:1 1 auto`), não `width:100%`: dentro de um flex row, `width` disputa
   espaço com o texto igual a um segundo item e o rótulo quebra em duas
   linhas. */
html[data-rpgw='correio'] .cor__topo h2::after {
  content: '';
  flex: 1 1 auto;
  height: calc(1px * var(--rpg-un, 1));
  margin-left: calc(8px * var(--rpg-un, 1));
  background: linear-gradient(90deg, #9c7c4e88, #9c7c4e00);
}
/* 🚨 "Correio" duas vezes: o chrome já diz o nome da janela; o rótulo interno só
   informa algo NOVO quando é "Escrever carta" — na caixa de entrada (o botão
   `[data-escrever]` só existe nessa vista) ele é puro eco e sai. `:has()` lê a
   vista pelo que está ao lado, sem precisar tocar no HTML do jogo. */
html[data-rpgw='correio'] .cor__topo:has([data-escrever]) h2 {
  display: none;
}
html[data-rpgw='correio'] .cor__topo__dir {
  flex: 0 0 auto;
  gap: calc(8px * var(--rpg-un, 1));
  /* Some o h2 acima, sobra só este grupo — sem isto `space-between` do jogo
     jogaria Escrever/X para a ESQUERDA com um item só na linha. */
  margin-left: auto;
}

/* ── erro do servidor: isto sim é perigo de verdade ───────────────── */
html[data-rpgw='correio'] .cor__erro {
  flex: 0 0 auto;
  margin: 0;
  padding: calc(8px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #a04a4a;
  border-radius: var(--rpg-raio-p);
  background: #ff6b6b1a;
  color: var(--rpg-perigo);
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 15.5px);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
 * A CAIXA DE ENTRADA
 * ═══════════════════════════════════════════════════════════════════════ */

/* Vazio/carregando são mensagens curtas — centralizam na área toda, como um
   estado vazio de verdade. A LISTA (abaixo) é o oposto: tamanho natural, para
   uma caixa com poucas cartas não esticar 6 linhas numa moldura de 20 e
   deixar um buraco preto no meio — o resto sobra embaixo, como respiro. */
html[data-rpgw='correio'] .cor__carregando,
html[data-rpgw='correio'] .cor__vazio {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
html[data-rpgw='correio'] .cor__vazio {
  flex-direction: column;
  gap: calc(8px * var(--rpg-un, 1));
  margin: 0;
  padding: calc(20px * var(--rpg-un, 1));
  color: var(--rpg-tinta-3);
  font-size: clamp(9px, calc(13px * var(--rpg-un, 1)), 17px);
  text-align: center;
}
/* A moldura da peça (poço + aro), a mesma linguagem do `.rpg-slot` — sem ela o
   envelope flutua sozinho e, dessaturado, vira o ponto mais claro da tela
   escura em vez do estado calmo que um "nada por aqui" pede. */
html[data-rpgw='correio'] .cor__vazio img {
  width: calc(52px * var(--rpg-un, 1));
  height: calc(52px * var(--rpg-un, 1));
  padding: calc(14px * var(--rpg-un, 1));
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--rpg-cabeca-a), var(--rpg-poço));
  box-shadow: inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) #ffffff1a;
  opacity: 1;
  filter: none;
}
html[data-rpgw='correio'] .cor__carregando {
  margin: 0;
  color: var(--rpg-tinta-3);
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 15.5px);
}

/* ── a lista, com rolagem própria: o rodapé (nota de prazo) não pode
      sumir empurrado por uma caixa cheia ─────────────────────────────── */
/* 🚨 O DEFEITO 9-bis #3, de novo: `flex:0 1 auto` deixa a lista do tamanho do
   conteúdo e sobra um retângulo preto liso entre a nota e a borda — pior com
   uma carta só (o caso comum de conta nova/voltando) que com seis. A lição é
   "a grade centraliza ou cresce": aqui ela faz as DUAS. `flex:1 1 auto` puxa
   a folga inteira para dentro da lista (a nota, depois dela, cola no fundo de
   verdade em vez de sobrar espaço morto atrás dela); `justify-content` então
   centra as cartas nessa folga — poucas cartas ganham respiro em volta em vez
   de um buraco embaixo. `safe center` cai para `flex-start` sozinho quando a
   lista TRANSBORDA (cheia), senão centralizar esconderia a primeira carta
   acima do topo rolável. */
html[data-rpgw='correio'] .cor__lista {
  flex: 1 1 auto;
  min-height: 0;
  justify-content: flex-start;
  justify-content: safe center;
}

/* 🚨 COM A JANELA ENCOLHENDO, A CONTA SE INVERTE. O `flex:1 1 auto` acima
   resolve o vão puxando a folga para dentro da lista — mas ele só funciona
   quando existe uma altura definida para repartir. No modo `encolhe` o quadro
   é que se ajusta ao conteúdo, então a lista precisa MEDIR o conteúdo: com
   `flex:1` ela colapsava para uma faixa fina e o quadro encolhia junto,
   deixando as cartas espremidas numa fresta. Aqui manda o tamanho natural, e
   quem dá o teto é o `max-height` do kit. */
html[data-rpgw-encolhe][data-rpgw='correio'] .cor__lista {
  flex: 0 0 auto;
  justify-content: flex-start;
  gap: calc(9px * var(--rpg-un, 1));
  padding-right: calc(2px * var(--rpg-un, 1));
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rpg-aro) var(--rpg-poço);
}
html[data-rpgw='correio'] .cor__lista::-webkit-scrollbar {
  width: calc(7px * var(--rpg-un, 1));
}
html[data-rpgw='correio'] .cor__lista::-webkit-scrollbar-track {
  background: var(--rpg-poço);
  border-radius: 999px;
}
html[data-rpgw='correio'] .cor__lista::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a9782c, #6b4f1f);
  border-radius: 999px;
}

/* ── carta: o poço do jogo, com zebra sutil e aro dourado quando não lida ── */
html[data-rpgw='correio'] .cor__carta {
  flex: 0 0 auto;
  border: calc(1px * var(--rpg-un, 1)) solid #ffffff14;
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, var(--rpg-painel-a) 0%, var(--rpg-painel-b) 100%);
  box-shadow: inset 0 calc(2px * var(--rpg-un, 1)) calc(5px * var(--rpg-un, 1)) #0006;
}
html[data-rpgw='correio'] .cor__carta:nth-child(even) {
  background: linear-gradient(180deg, var(--rpg-cabeca-a) 0%, var(--rpg-cabeca-b) 100%);
}
/* Não lida: o mesmo sinal da bolinha do atalho — aro e barra lateral dourados,
   e o remetente ganha peso. Sem isto, lida/não lida se confundem numa lista
   de seis cartas parecidas. */
html[data-rpgw='correio'] .cor__carta[data-lida='0'] {
  border-color: #9c7c4e88;
  box-shadow:
    inset calc(3px * var(--rpg-un, 1)) 0 0 var(--rpg-ouro),
    inset 0 calc(2px * var(--rpg-un, 1)) calc(5px * var(--rpg-un, 1)) #0006;
}

/* 🚨 DUAS LINHAS, não uma. De um lado remetente e assunto saíam do mesmo
   tamanho e cor de apoio — o olho não tinha por onde varrer; do outro, em
   844×390 quatro campos numa linha só sobravam 4-5px de fonte (9-bis #7). A
   grade de 4 colunas continua a mesma do jogo (`auto 1fr auto auto`), só
   ganha uma SEGUNDA linha: remetente vira etiqueta pequena, o assunto — o que
   importa de verdade — desce sozinho, grande, na linha de baixo. */
html[data-rpgw='correio'] .cor__cabeca {
  display: grid;
  /* `minmax(0, auto)`, não `auto` puro — sem o piso em 0 um remetente comprido
     (nome de jogador sem espaço) empurra a coluna e não sobra `min-width` pro
     ellipsis cortar (CONTRATO §3.8: "item de grid não encolhe sozinho"). */
  grid-template-columns: minmax(0, auto) 1fr auto auto;
  grid-template-rows: auto auto;
  column-gap: calc(8px * var(--rpg-un, 1));
  row-gap: calc(3px * var(--rpg-un, 1));
  padding: calc(10px * var(--rpg-un, 1)) calc(11px * var(--rpg-un, 1));
  border-radius: var(--rpg-raio-p);
}
html[data-rpgw='correio'] .cor__cabeca:hover {
  background: #ffffff08;
}
html[data-rpgw='correio'] .cor__carta[data-aberta='1'] .cor__cabeca {
  border-radius: var(--rpg-raio-p) var(--rpg-raio-p) 0 0;
}
html[data-rpgw='correio'] .cor__de {
  grid-row: 1;
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
  color: var(--rpg-ouro);
  font-weight: 800;
  -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
}
html[data-rpgw='correio'] .cor__assunto {
  grid-row: 2;
  grid-column: 1 / -1;
  min-width: 0;
  font-size: clamp(9px, calc(15px * var(--rpg-un, 1)), 19.5px);
  font-weight: 700;
  color: var(--rpg-tinta);
}
html[data-rpgw='correio'] .cor__carta[data-lida='1'] .cor__de {
  color: var(--rpg-tinta-3);
  -webkit-text-stroke: 0;
}
html[data-rpgw='correio'] .cor__carta[data-lida='1'] .cor__assunto {
  color: var(--rpg-tinta-3);
  font-weight: 400;
}
/* O selo de prêmio — antes o glifo cinza `📎` do sistema, sem nada do acervo
   por perto; agora um medalhão dourado com o ícone de recompensa, do mesmo
   jeito que o kit tinge as peças-máscara brancas (ver `loja.css`). */
html[data-rpgw='correio'] .cor__clipe {
  grid-row: 1;
  grid-column: 3;
  align-self: center;
  width: calc(19px * var(--rpg-un, 1));
  height: calc(19px * var(--rpg-un, 1));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--rpg-cabeca-a), var(--rpg-poço));
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffc94a59;
  font-size: 0;
  line-height: 0;
}
html[data-rpgw='correio'] .cor__clipe::before {
  content: '';
  width: 58%;
  height: 58%;
  background: var(--rpg-ouro);
  -webkit-mask: url('/potato/rpg/pecas/Icon_64_Reward.png') center / 100% 100% no-repeat;
  mask: url('/potato/rpg/pecas/Icon_64_Reward.png') center / 100% 100% no-repeat;
}
html[data-rpgw='correio'] .cor__prazo {
  grid-row: 1;
  grid-column: 4;
  align-self: center;
  color: var(--rpg-tinta-3);
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
  font-weight: 700;
  white-space: nowrap;
}
/* Prazo curto é um AVISO, não um erro — quem não recebeu não perdeu nada
   ainda, a carta só volta para quem mandou. Âmbar, não vermelho. */
html[data-rpgw='correio'] .cor__prazo[data-urgente='1'] {
  color: var(--rpg-ambar);
}

html[data-rpgw='correio'] .cor__corpo {
  gap: calc(8px * var(--rpg-un, 1));
  padding: 0 calc(11px * var(--rpg-un, 1)) calc(11px * var(--rpg-un, 1));
}
html[data-rpgw='correio'] .cor__texto {
  color: var(--rpg-tinta-2);
  font-size: clamp(9px, calc(12.5px * var(--rpg-un, 1)), 16.5px);
  line-height: 1.5;
}

html[data-rpgw='correio'] .cor__anexos {
  gap: calc(6px * var(--rpg-un, 1));
}
html[data-rpgw='correio'] .cor__anexo {
  gap: calc(6px * var(--rpg-un, 1));
  padding: calc(5px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1)) calc(5px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #ffc94a52;
  border-radius: 999px;
  background: #ffc94a14;
  font-size: clamp(9px, calc(11.5px * var(--rpg-un, 1)), 15px);
  font-weight: 700;
  color: var(--rpg-tinta);
}
html[data-rpgw='correio'] .cor__anexo img {
  width: calc(18px * var(--rpg-un, 1));
  height: calc(18px * var(--rpg-un, 1));
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--rpg-cabeca-a), var(--rpg-poço));
  padding: calc(2px * var(--rpg-un, 1));
}
html[data-rpgw='correio'] .cor__anexo b {
  color: var(--rpg-ouro);
}

/* ── nota do rodapé, sempre visível embaixo da lista ────────────────── */
html[data-rpgw='correio'] .cor__nota {
  flex: 0 0 auto;
  padding-top: calc(6px * var(--rpg-un, 1));
  border-top: calc(1px * var(--rpg-un, 1)) solid #ffffff14;
  color: var(--rpg-tinta-3);
  font-size: clamp(9px, calc(10.5px * var(--rpg-un, 1)), 13.5px);
  line-height: 1.4;
}
html[data-rpgw='correio'] .cor__nota b {
  color: var(--rpg-tinta-2);
}

/* ═══════════════════════════════════════════════════════════════════════
 * BOTÕES — base dourada (Receber / Enviar); pequeno e fraco são a ação
 * secundária (Escrever / Voltar) e NUNCA competem com a dourada na mesma
 * vista.
 *
 * 🚨 `identidade/styles.css` já pinta `.cor__btn`/`.cor__btn--fraco` de
 * dourado/azul-metálico com borda, sombra, cor e caixa-alta em `!important`
 * — o mesmo desenho usado no Convite, Ranking, Deusa… Bater cada propriedade
 * com `!important` aqui é o que troca a peça pela do kit; sem isso, o botão
 * sai render com a moldura espessa e a fonte serifada do tema antigo por
 * baixo de qualquer regra sem `!important`.
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='correio'] .cor__btn {
  min-height: calc(32px * var(--rpg-un, 1));
  padding: 0 calc(16px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro) !important;
  border-radius: var(--rpg-raio-p) !important;
  background: linear-gradient(180deg, #ffb03a 0%, #b4661a 100%) !important;
  box-shadow:
    inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffe1a8,
    0 calc(2px * var(--rpg-un, 1)) calc(5px * var(--rpg-un, 1)) #0008 !important;
  color: #2a1200 !important;
  font-family: 'Baloo 2', system-ui, sans-serif !important;
  font-size: clamp(9px, calc(13px * var(--rpg-un, 1)), 17px);
  font-weight: 700 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  -webkit-text-stroke: calc(1px * var(--rpg-un, 1)) #ffd58a;
  paint-order: stroke fill;
  transition: filter 0.12s ease, translate 0.08s ease;
}
html[data-rpgw='correio'] .cor__btn:hover:not(:disabled) {
  filter: brightness(1.12);
}
html[data-rpgw='correio'] .cor__btn:active:not(:disabled) {
  translate: 0 calc(1px * var(--rpg-un, 1));
}
/* Desabilitado vira fantasma (mesmo tratamento da Loja/`.rpg-btn--fantasma`),
   não dourado desbotado — grayscale sobre o degradê laranja saía num losango
   bege-lamacento de baixo contraste, com cara de botão de sistema. */
html[data-rpgw='correio'] .cor__btn:disabled {
  border-color: #8a7255 !important;
  background: linear-gradient(180deg, #6b5a3f 0%, #3f3120 100%) !important;
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffffff1f !important;
  color: var(--rpg-tinta-3) !important;
  -webkit-text-stroke: 0 !important;
  filter: none !important;
  cursor: not-allowed;
}

/* "Escrever" (cabeçalho) e "Voltar" (rodapé da folha): fantasma, para o
   dourado sobrar só para a ação que fecha negócio. */
html[data-rpgw='correio'] .cor__btn--pequeno,
html[data-rpgw='correio'] .cor__btn--fraco {
  min-height: calc(28px * var(--rpg-un, 1));
  padding: 0 calc(12px * var(--rpg-un, 1));
  border-color: #8a7255 !important;
  background: linear-gradient(180deg, #6b5a3f 0%, #3f3120 100%) !important;
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffffff1f !important;
  color: var(--rpg-tinta) !important;
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 15.5px);
  -webkit-text-stroke: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
 * A FOLHA DE ESCREVER
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='correio'] .cor__folha {
  flex: 0 1 auto;
  min-height: 0;
  gap: calc(8px * var(--rpg-un, 1));
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rpg-aro) var(--rpg-poço);
}

html[data-rpgw='correio'] .cor__campo {
  gap: calc(3px * var(--rpg-un, 1));
  color: var(--rpg-tinta-3);
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
  font-weight: 700;
}
html[data-rpgw='correio'] .cor__campo input,
html[data-rpgw='correio'] .cor__campo textarea {
  padding: calc(7px * var(--rpg-un, 1)) calc(9px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #ffffff1f;
  border-radius: var(--rpg-raio-p);
  background: var(--rpg-poço);
  color: var(--rpg-tinta);
  font-size: clamp(9px, calc(12.5px * var(--rpg-un, 1)), 16.5px);
  font-weight: 400;
}
html[data-rpgw='correio'] .cor__campo input:focus,
html[data-rpgw='correio'] .cor__campo textarea:focus {
  outline: calc(2px * var(--rpg-un, 1)) solid #ffc94a80;
  outline-offset: calc(-1px * var(--rpg-un, 1));
}
html[data-rpgw='correio'] .cor__campo textarea {
  min-height: calc(48px * var(--rpg-un, 1));
  /* A alça nativa do sistema deforma a folha ao arrastar — o mesmo vazamento
     de controle nativo da lição 9-bis #6, aqui no `<textarea>`. */
  resize: none;
}

html[data-rpgw='correio'] .cor__pergunta {
  margin: 0;
  color: var(--rpg-tinta-2);
  font-size: clamp(9px, calc(11.5px * var(--rpg-un, 1)), 15px);
}
html[data-rpgw='correio'] .cor__pergunta b {
  color: var(--rpg-ouro);
}

/* O corte no meio de uma linha (a bolsa passa de 3 itens fácil) some sem
   aviso — nem desvanecer, nem seta. O `mask` esmaece a última fatia visível:
   fica claro que tem mais embaixo, não parece um artefato de renderização. */
html[data-rpgw='correio'] .cor__itens {
  /* 🚨 Item flex com `overflow` diferente de `visible` perde o piso de tamanho
     automático e pode encolher até 0 quando o pai (`.cor__folha`) aperta — foi
     o que aconteceu em 844×390: a lista de itens sumia (altura computada
     0px) mesmo com 60 itens dentro, sem nenhum jeito de marcar o que enviar.
     `flex-shrink:0` tira a lista dessa conta; quem sobra é `.cor__folha`,
     que já rola (`overflow:hidden auto`). */
  flex-shrink: 0;
  gap: calc(4px * var(--rpg-un, 1));
  max-height: calc(148px * var(--rpg-un, 1));
  padding-right: calc(2px * var(--rpg-un, 1));
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rpg-aro) var(--rpg-poço);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - calc(18px * var(--rpg-un, 1))), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - calc(18px * var(--rpg-un, 1))), transparent 100%);
}
html[data-rpgw='correio'] .cor__itens label {
  gap: calc(8px * var(--rpg-un, 1));
  padding: calc(6px * var(--rpg-un, 1)) calc(9px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #ffffff14;
  border-radius: var(--rpg-raio-p);
  background: #ffffff05;
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 15.5px);
  color: var(--rpg-tinta);
}
html[data-rpgw='correio'] .cor__itens label:hover {
  background: #ffffff0d;
}
html[data-rpgw='correio'] .cor__itens label:has(input:checked) {
  border-color: var(--rpg-aro-ouro);
  background: #ffc94a1a;
}
html[data-rpgw='correio'] .cor__itens em {
  color: var(--rpg-tinta-3);
  font-size: clamp(9px, calc(10.5px * var(--rpg-un, 1)), 13.5px);
}
/* Checkbox nativo entrega o desenho do sistema — troca por um quadrado do
   mesmo desenho dos slots, que acende dourado quando marcado. */
html[data-rpgw='correio'] .cor__itens input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  width: calc(16px * var(--rpg-un, 1));
  height: calc(16px * var(--rpg-un, 1));
  margin: 0;
  display: grid;
  place-items: center;
  border: calc(1.5px * var(--rpg-un, 1)) solid #8a7255;
  border-radius: calc(4px * var(--rpg-un, 1));
  background: var(--rpg-poço);
  cursor: pointer;
}
html[data-rpgw='correio'] .cor__itens input[type='checkbox']:checked {
  border-color: var(--rpg-aro-ouro);
  background: linear-gradient(180deg, #ffb03a 0%, #b4661a 100%);
}
html[data-rpgw='correio'] .cor__itens input[type='checkbox']:checked::after {
  content: '✓';
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
  font-weight: 900;
  line-height: 1;
  color: #2a1200;
}

/* A conta: um resumo, não uma segunda ação. Com a borda e o fundo dourados
   ela gritava mais que o próprio botão "Enviar" — dourado que sobra em duas
   peças não destaca nenhuma (§7 do contrato). Fica neutra; quem carrega ouro
   é só o número, no `<b>`. "Não cabe" continua âmbar — isso sim é aviso. */
html[data-rpgw='correio'] .cor__conta {
  margin: 0;
  padding: calc(8px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #ffffff14;
  border-radius: var(--rpg-raio-p);
  background: #ffffff08;
  color: var(--rpg-tinta-2);
  font-size: clamp(9px, calc(12.5px * var(--rpg-un, 1)), 16.5px);
}
html[data-rpgw='correio'] .cor__conta b {
  color: var(--rpg-ouro);
}
html[data-rpgw='correio'] .cor__conta[data-cabe='0'] {
  border-color: #ffa12959;
  background: #ffa12914;
  color: var(--rpg-ambar);
}
html[data-rpgw='correio'] .cor__conta[data-cabe='0'] b {
  color: var(--rpg-ambar);
}

html[data-rpgw='correio'] .cor__ok {
  margin: 0;
  padding: calc(8px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #8fd8174d;
  border-radius: var(--rpg-raio-p);
  background: #8fd81714;
  color: var(--rpg-bom);
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 15.5px);
  font-weight: 700;
}

html[data-rpgw='correio'] .cor__acoes {
  flex: 0 0 auto;
  gap: calc(8px * var(--rpg-un, 1));
}

/* ── pouca altura (celular deitado): a coluna vira mais compacta ──────
   🚨 9-bis #7: em tela baixa `--rpg-un` despenca (≈0,41 num 844×390) e todo
   `N * un` herdado do desktop encolhe junto — o coeficiente do desktop vira
   glifo de menos de seis pixels reais, ilegível. Aqui os coeficientes são
   MAIORES de propósito: o resultado final ainda sai pequeno (tela de
   celular), mas lê-se; a régua de baixo é "dá pra ler", não "bate com o
   desktop". */
@media (max-height: 420px) {
  html[data-rpgw='correio'] .cor__caixa {
    gap: calc(5px * var(--rpg-un, 1));
    padding: calc(8px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1));
  }
  /* Só a nota de rodapé da caixa de entrada (prazo de 30 dias) é dispensável
     aqui — ela é filha DIRETA de `.cor__caixa`. As dentro da folha de
     escrever (`.cor__folha .cor__nota`) são a única explicação de como o
     envio funciona e continuam de pé: 9-bis #7 pede menos texto, não a
     regra do jogo escondida. */
  html[data-rpgw='correio'] .cor__caixa > .cor__nota {
    display: none;
  }
  html[data-rpgw='correio'] .cor__topo h2 {
    font-size: clamp(12px, calc(22px * var(--rpg-un, 1)), 28.5px);
  }
  html[data-rpgw='correio'] .cor__lista {
    gap: calc(6px * var(--rpg-un, 1));
  }
  html[data-rpgw='correio'] .cor__cabeca {
    column-gap: calc(6px * var(--rpg-un, 1));
    row-gap: calc(2px * var(--rpg-un, 1));
    padding: calc(7px * var(--rpg-un, 1)) calc(8px * var(--rpg-un, 1));
  }
  html[data-rpgw='correio'] .cor__de {
    font-size: clamp(11px, calc(20px * var(--rpg-un, 1)), 26px);
  }
  html[data-rpgw='correio'] .cor__assunto {
    font-size: clamp(14.5px, calc(26px * var(--rpg-un, 1)), 34px);
  }
  html[data-rpgw='correio'] .cor__prazo {
    font-size: clamp(11px, calc(20px * var(--rpg-un, 1)), 26px);
  }
  html[data-rpgw='correio'] .cor__pergunta,
  html[data-rpgw='correio'] .cor__campo,
  html[data-rpgw='correio'] .cor__itens label,
  html[data-rpgw='correio'] .cor__conta,
  html[data-rpgw='correio'] .cor__folha .cor__nota {
    font-size: clamp(11.5px, calc(21px * var(--rpg-un, 1)), 27.5px);
  }
  html[data-rpgw='correio'] .cor__campo input,
  html[data-rpgw='correio'] .cor__campo textarea,
  html[data-rpgw='correio'] .cor__btn {
    font-size: clamp(12.5px, calc(23px * var(--rpg-un, 1)), 30px);
  }
  html[data-rpgw='correio'] .cor__itens em {
    font-size: clamp(10px, calc(18px * var(--rpg-un, 1)), 23.5px);
  }
  html[data-rpgw='correio'] .cor__itens {
    max-height: calc(108px * var(--rpg-un, 1));
  }
  html[data-rpgw='correio'] .cor__campo textarea {
    min-height: calc(34px * var(--rpg-un, 1));
  }
}