/* Stamps — avisos como carimbos sobre a folha: moldura na cor do estado,
   etiqueta em mono, texto em tinta. Serve a dois lugares: o aviso do último
   gesto, que flutua (ver .flashes no fim do arquivo), e a mensagem em fluxo
   dentro do modal de catálogo. O carimbo é o mesmo nos dois — quem flutua é a
   página, não a peça. */

.stamp {
  display: inline-block; position: relative;
  padding: 10px var(--stamp-pr, 16px) 10px 16px; font-size: 14px;
  border: 1px solid currentColor; border-radius: var(--r);
  color: var(--stamp-color, var(--ink-muted));
  background: var(--stamp-bg, var(--surface-2));

  & .tag {
    font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; display: block; margin-bottom: 3px;
  }

  & .msg { color: var(--ink); }

  & b { font-weight: 700; }

  /* Só o carimbo que se fecha paga a margem do ×, e ele mesmo se cobra: o
     container não alcança dentro do componente para ajustar espaçamento. */
  &:has(> .stamp-x) { --stamp-pr: 34px; }
}

.stamp--urgent { --stamp-color: var(--urgent); --stamp-bg: var(--urgent-soft); }
.stamp--info   { --stamp-color: var(--accent); --stamp-bg: var(--accent-soft); }

/* O fecho. É ação de ícone, como .cat-act e .edit-link — a regra "todo botão
   tem fundo" governa a escala .btn, não o × de um carimbo que já é uma caixa.
   Em repouso é só o glifo na cor da moldura; o fundo aparece no hover, que é
   quando alguém precisa saber onde o alvo começa e termina. */
.stamp-x {
  position: absolute; top: 4px; right: 5px;
  width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: var(--r); background: none;
  font: inherit; font-size: 17px; line-height: 1;
  color: inherit; opacity: .5; cursor: pointer;

  &:hover { opacity: 1; background: var(--surface); }
}

/* Os avisos da página flutuam sobre a folha em vez de empurrá-la. Duas razões,
   as duas visíveis no gesto de registrar um comparecimento:

   A folha parava de saltar. O carimbo nascia como primeiro filho de <main> no
   mesmo instante em que o morph tirava a linha da lista — duas coisas se
   mexendo por um gesto só, e a tabela inteira descia um carimbo de altura.

   E o aviso parava de nascer fora da tela. `turbo-refresh-scroll: preserve`
   mantém a rolagem onde estava; quem registra uma linha no fim da agenda não
   via o carimbo que nasceu lá em cima. Fixo na viewport, ele está onde o olho
   já está.

   A faixa vazia dos lados não pode roubar clique do que está embaixo: daí
   pointer-events none aqui e auto no carimbo. */
.flashes {
  position: fixed; z-index: 10; top: 16px; left: 50%; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: max-content; max-width: min(460px, calc(100vw - 32px));
  pointer-events: none;

  /* A entrada é do carimbo em flash, não do carimbo em geral: no /styleguide e
     no modal de catálogo ele é peça em fluxo e não deve piscar ao carregar a
     página. Sob prefers-reduced-motion a transição some inteira (base.css) e o
     aviso simplesmente aparece — que é o comportamento certo, não uma falha.
     É também por isso que a saída não espera transitionend; ver
     flash_controller.js. */
  & > .stamp {
    pointer-events: auto;
    transition: opacity .18s ease, translate .18s ease;

    @starting-style { opacity: 0; translate: 0 -8px; }
  }

  & > .stamp.is-leaving { opacity: 0; translate: 0 -8px; }
}

/* Elemento fixo entra em toda página impressa, e esta tela imprime: a Agenda
   sai no papel como está. O aviso do último gesto não é o documento. */
@media print { .flashes { display: none; } }