/* Hermes' mail: a 3:4 paper as big as fits, the tools in a strip at thumb height. */
.correio { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; height: 100svh; min-height: 0; padding: 64px 12px calc(var(--caminho-h) + 10px + env(safe-area-inset-bottom));
  background: linear-gradient(rgb(247 241 227 / .55), rgb(247 241 227 / .7)), url(/img/estufa-p.webp) center / cover; }
.correio-topo { text-align: center; }
.correio-topo .titulo { font-size: clamp(26px, 7vw, 36px); }
.presenca-correio { margin: 0; min-height: 24px; font: 500 20px var(--f-mao); color: var(--madeira); }
.presenca-correio.juntos { color: var(--musgo); }
.mesa { display: grid; place-items: center; min-height: 0; container-type: size; }
.papel-desenho { position: relative; aspect-ratio: 3 / 4; width: min(100cqw, 75cqh); background: #FFFCF4 url(/img/papel-creme.webp) center / cover;
  box-shadow: 0 10px 30px rgb(122 90 67 / .22), 0 0 0 1px rgb(122 90 67 / .1); touch-action: none; }
.papel-desenho canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.papel-desenho .camada-fundo { pointer-events: none; }
.ponta-outro { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #FFF4C2; pointer-events: none;
  box-shadow: 0 0 10px 4px rgb(233 196 106 / .8); animation: pulsa 1.2s ease-in-out infinite; }

.ferramentas { display: grid; gap: 8px; justify-items: center; padding: 8px 10px; border-radius: 12px; background: #EBDDC3 url(/img/papel-creme.webp) center / cover;
  box-shadow: inset 0 0 0 2px rgb(122 90 67 / .28), 0 6px 18px rgb(122 90 67 / .2); }
.linha-ferr, .linha-cores { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ferramenta { display: grid; justify-items: center; min-width: 58px; min-height: 52px; padding: 4px 6px; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--tinta); }
.ferramenta small { font: 600 14px/1.1 var(--f-texto); font-variant: small-caps; color: var(--madeira); }
.ferramenta[aria-pressed="true"] { border-color: var(--hibisco); background: #FBEDEE; }
.ferramenta span { width: 26px; height: 26px; background: var(--tinta); }
.icone-pena { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 3c-6 1-11 6-13 13l-3 5 5-3c7-2 12-7 11-15zM8 16l8-8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.icone-aquarela { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c4 5 6 8 6 11a6 6 0 0 1-12 0c0-3 2-6 6-11z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; }
.icone-po { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.6 5 5 1.6-5 1.6L12 15l-1.6-4.8-5-1.6 5-1.6zM19 14l.8 2.2 2.2.8-2.2.8L19 20l-.8-2.2-2.2-.8 2.2-.8zM6 15l.6 1.6 1.6.6-1.6.6L6 19.4l-.6-1.6-1.6-.6 1.6-.6z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; background: var(--sol) !important; }
.icone-borracha { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 4l6 6-9 9H6l-3-3zM9 10l6 6M6 19h14' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.desfazer { min-width: 52px; min-height: 52px; border: 0; border-radius: 12px; background: none; font-size: 26px; color: var(--madeira); }
.cor { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #FFFCF4; background: var(--c); box-shadow: 0 0 0 1px rgb(122 90 67 / .25); }
.cor, .espessura { position: relative; }
.cor::after, .espessura::after { content: ''; position: absolute; inset: -5px; }   /* a 44 px grip around each swatch */
.cor[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--hibisco); }
.espessura { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgb(122 90 67 / .25); background: #FFFCF4; display: grid; place-items: center; }
.espessura span { width: calc(var(--e) * 1.4px + 3px); height: calc(var(--e) * 1.4px + 3px); border-radius: 50%; background: var(--tinta); }
.espessura[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--hibisco); }
.separa { width: 1px; height: 28px; background: rgb(122 90 67 / .2); margin: 0 4px; align-self: center; }
.galeria { min-height: 44px; border: 0; background: none; font: 600 14px var(--f-texto); font-variant: small-caps; color: var(--madeira); }
.galeria-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.pagina-antiga { width: 100%; height: auto; aspect-ratio: 3 / 4; background: #FFFCF4 url(/img/papel-creme.webp) center / cover; }

/* phones: tools are compact; the colours scroll sideways if they do not fit */
@media (max-width: 700px) {
  .correio { padding-top: 58px; gap: 6px; }
  .linha-cores { flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; max-width: 100%; padding: 4px; }   /* safe: never hide the first colours */
  .linha-cores { gap: 8px; }
  .linha-ferr { gap: 2px; flex-wrap: nowrap; }
  .ferramenta { min-width: 44px; padding: 4px 5px; }
  .cor, .espessura { flex: none; width: 36px; height: 36px; }
}
@media (min-width: 900px) {
  .correio { grid-template-columns: 1fr 236px minmax(0, 560px) 236px 1fr; grid-template-rows: auto minmax(0, 1fr); padding: 80px 40px calc(var(--caminho-h) + 30px); column-gap: 28px; }
  .correio-topo { grid-column: 1 / -1; }
  .mesa { grid-column: 3; grid-row: 2; }
  .ferramentas { grid-column: 2; grid-row: 2; align-self: center; width: 236px; padding: 14px 12px; }
  .linha-ferr { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; width: 100%; }
  .linha-ferr .desfazer { grid-column: 1 / -1; justify-self: center; }
  .linha-cores { display: grid; grid-template-columns: repeat(4, 40px); gap: 10px; justify-content: center; }
  .linha-cores .separa { grid-column: 1 / -1; height: 0; }
  .linha-cores .espessura { grid-column: auto; }
}

.ferramentas { position: relative; }
.desfazer small { display: none; }
.linha-tinta { display: flex; align-items: center; gap: 12px; max-width: 100%; }
.linha-esp { display: flex; gap: 8px; }
@media (max-width: 700px) {
  .linha-tinta { overflow-x: auto; padding: 4px 12px 4px 4px; }
  .linha-cores { overflow: visible; padding: 0; flex: none; }
  .linha-esp { flex: none; }
}
@media (min-width: 900px) {
  /* the desk: one wooden board under the tray and the paper */
  .correio::before { content: ''; grid-column: 2 / 5; grid-row: 2; margin: 0 -26px -22px; border-radius: 14px 18px 12px 16px; z-index: 0;
    background: url(/img/mesa.webp) center / cover; filter: saturate(.78) brightness(1.03);
    box-shadow: inset 0 0 0 2px rgb(122 90 67 / .35), inset 0 -30px 40px rgb(70 52 34 / .18), 0 22px 44px rgb(70 52 34 / .28); }
  .mesa { padding-top: 22px; }
  .ferramentas { background: #EAD9BC url(/img/papel-creme.webp) center / cover; border: 1px solid rgb(122 90 67 / .35); box-shadow: 0 6px 12px rgb(70 52 34 / .25); }
  .mesa, .ferramentas { position: relative; z-index: 1; }
  .papel-desenho { box-shadow: 0 8px 18px rgb(50 30 15 / .35); }
  .ferramentas { box-shadow: 0 6px 14px rgb(50 30 15 / .3); }
  .linha-tinta { display: grid; justify-items: center; gap: 12px; }
  .linha-cores { display: grid; grid-template-columns: repeat(4, 40px); gap: 10px; }
  .linha-esp { justify-content: center; gap: 12px; }
  .desfazer { display: grid; justify-items: center; font-size: 22px; min-height: 52px; }
  .desfazer small { display: block; font: 600 14px/1.1 var(--f-texto); font-variant: small-caps; color: var(--madeira); }
  .correio-topo { margin-bottom: 18px; }
}