/* ArtDots: estilos do app e das páginas (uma marca só desde a Fase C; a
   identidade do ArtDots desde o round 12, D2: os tokens do kit caem nas
   variáveis de sempre, sem um segundo sistema de tema) */
:root {
  --tile-red: #c0392b;
  --tile-orange: #e67e22;
  --tile-blue: #2270a2;
  --tile-green: #27ae60;
  --tile-dark: #2c3e50;
  /* rejunte bege: SÓ o selo da coleção Mosaicos de Londrina (.brand-tiles) */
  --grout: #f5e9d7;
  /* round 12 (D2): o azul do ArtDots (#373BFF, o ponto no claro) é a cor de
     ação: links, curtida, selos, pontos do mapa, o (+). Branco sobre ele dá
     6.5:1; ele sobre o papel 5.9:1. --primary-dark é o hover (10% mais escuro). */
  --primary: #373BFF;
  --primary-dark: #2A2ECC;
  /* Fase A do round 10: o texto azul sobre as superfícies usa --primary-ink.
     No claro é o próprio azul; no escuro é o laranja do kit (#F46B45, 6.0:1
     no papel escuro), porque nenhum azul passa 4.5:1 com branco E com o fundo
     escuro ao mesmo tempo. --ok é o verde de texto ("found", "verified"):
     o --tile-green é só de preenchimento (2.9:1 como texto no branco). */
  --primary-ink: var(--primary);
  /* round 12: #1f7a45 dava 4.4:1 no --fill novo (#EDE9E0); #1b6e3e dá 5.2:1 */
  --ok: #1b6e3e;
  /* tinta e papel do kit: #151515 sobre #F5F2EB dá 16:1; o cinza #625F59, 5.6:1 */
  --ink: #151515;
  --paper: #F5F2EB;
  --line: #D9D4CB;
  --muted: #625F59;
  /* superfícies: cartão/campo (branco sobre o papel), vidro do topo e da barra
     (o mapa e o vidro seguem brancos), hover, destaque suave (o azul a 8%) */
  --card: #fff;
  --paper-glass: rgba(255, 255, 255, .86);
  --hover: #ECE8DF;
  /* preenchimento neutro (placeholder de foto, chips, caixas de aviso) */
  --fill: #EDE9E0;
  --soft: #E9E9FF;
  /* cantos do kit: 16 em cartões e folhas, 10 em botões, campos e chips */
  --radius: 16px;
  --radius-ctl: 10px;
  /* botão principal: tinta com texto branco (no escuro, branco com tinta) */
  --btn-bg: #151515;
  --btn-bg-hover: #3a3a3a;
  --btn-fg: #fff;
  /* anel de foco do kit: 3 px de tinta (branco no escuro), 3 px de folga */
  --focus: #151515;
  --shadow: 0 4px 18px rgba(0, 0, 0, .15);
  /* altura que a ilha ocupa embaixo: 6 de folga + 54 da ilha + 2 do (+) + respiro,
     mais a área segura. Quem precisa ficar acima da barra soma o próprio espaço. */
  --tabbar-h: calc(76px + env(safe-area-inset-bottom));
  font-size: 16px;
  color-scheme: light;
}

/* tema escuro: só os tokens (sem redesenho). O mapa segue claro; cartões,
   modais, telas e barra escurecem. O azul de ação e as tesselas não mudam; o
   texto de destaque vira o laranja do kit (round 12, D2). */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ece8e1;
    --paper: #151515;
    --line: #3a3732;
    --muted: #a39d93;
    --primary-ink: #F46B45;
    --ok: #27ae60;
    --grout: #2a2723;
    --fill: #2a2723;
    --card: #23211e;
    --paper-glass: rgba(25, 24, 22, .92);
    --hover: #2e2b27;
    --soft: #1d2a33;
    --shadow: 0 4px 18px rgba(0, 0, 0, .5);
    --btn-bg: #fff;
    --btn-bg-hover: #d9d9d9;
    --btn-fg: #151515;
    --focus: #fff;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
  /* app de mapa: a página não rola nem quica — os gestos são do mapa */
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  width: 100%;
}

/* toque duplo no chrome não dá zoom na página (o mapa mantém os gestos dele) */
.topbar, .ilha, .modal, .tela, .fab, button, a {
  touch-action: manipulation;
}

.hidden { display: none !important; }

/* foco visível no teclado (o toque não mostra o contorno) */
button:focus-visible, a:focus-visible, select:focus-visible, .f-chip:focus-visible,
.tag-chip:focus-visible, .seg-btn:focus-visible, .tessela:focus-visible, input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* ícones inline (mesmo padrão do Run&Co: stroke currentColor, 20x20) */
svg.ic {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -.15em;
  flex-shrink: 0;
}
svg.ic-titulo { width: 1.15em; height: 1.15em; vertical-align: -.18em; color: var(--primary-ink); }

/* ---------- topbar ---------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: calc(env(safe-area-inset-top) + .55rem) .9rem .55rem;
  background: var(--paper-glass);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: .4em; }
/* no app a marca é botão (volta ao mapa): sem cara de botão, alvo de 44px */
button.brand { font: inherit; color: inherit; background: none; border: 0; padding: 0 .2rem 0 0; margin: 0; min-height: 44px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* round 12 (D3): o nome é o wordmark geométrico do kit, um <picture> com a
   versão tinta (claro) e a branca (escuro); o <img> tem alt="" e o nome
   acessível vem do botão ou do link. 32 px de altura no app (128 de largura,
   acima dos 120 mínimos do kit), 36 nas páginas; o respiro de meio ponto de
   cada lado já vem do padding do topo. */
.brand-logo { display: block; flex-shrink: 0; line-height: 0; }
.brand-logo img { display: block; height: 36px; width: auto; }
#btn-brand .brand-logo img { height: 32px; }
.brand-sub { font-weight: 700; color: var(--muted); font-size: .95rem; }

/* 3x3 de tesselas com "rejunte" cru: desde a Fase C é só o SELO da coleção
   Mosaicos de Londrina (chip da coleção, /c/mosaicos-londrina, /sobre,
   /artista, /about). A marca do ArtDots é o wordmark com o ponto (round 12). */
.brand-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
  width: 24px;
  height: 24px;
  padding: 2px;
  background: #f5e9d7; /* rejunte do logo: fixo nos dois temas */
  border-radius: 5px;
}
.brand-tiles i { border-radius: 1.5px; }
.brand-tiles i:nth-child(1) { background: var(--tile-red); }
.brand-tiles i:nth-child(2) { background: var(--tile-orange); }
.brand-tiles i:nth-child(3) { background: var(--tile-blue); }
.brand-tiles i:nth-child(4) { background: var(--tile-green); }
.brand-tiles i:nth-child(5) { background: var(--tile-dark); }
.brand-tiles i:nth-child(6) { background: var(--tile-red); }
.brand-tiles i:nth-child(7) { background: var(--tile-blue); }
.brand-tiles i:nth-child(8) { background: var(--tile-orange); }
.brand-tiles i:nth-child(9) { background: var(--tile-green); }

/* round 12 (D3): o ponto do ArtDots é UM <symbol id="marca-ad"> (um círculo
   cheio) em cada página, usado por <svg class="marca"><use href="#marca-ad"/></svg>
   nos usos pequenos (convite, conexão, retrato vazio); o fill herdado pinta
   o círculo na cor do texto. */
.marca { width: 1.2em; height: 1.2em; color: var(--primary-ink); fill: currentColor; flex-shrink: 0; vertical-align: -.22em; }
.brand .marca { width: 1.15em; height: 1.15em; }

/* selo da coleção: tesselas + nome (chip no app, links nas páginas) */
.colecao-selo { display: inline-flex; align-items: center; gap: .4rem; }
.colecao-selo .brand-tiles { width: 16px; height: 16px; padding: 1.5px; gap: 1px; border-radius: 4px; flex-shrink: 0; }
.colecao-selo .brand-tiles i { border-radius: 1px; }
a.colecao-selo { color: inherit; text-decoration: none; }
.colecao-selo-g { font-weight: 700; font-size: 1rem; }
.colecao-selo-g .brand-tiles { width: 24px; height: 24px; padding: 2px; gap: 2px; border-radius: 5px; }

.topbar-actions { display: flex; gap: .4rem; }

/* ---------- buttons ---------- */
.btn {
  border: 1px solid transparent;
  border-radius: var(--radius-ctl);
  padding: .5rem 1rem;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
/* round 12 (D2): botão principal em tinta com texto branco (no escuro, branco
   com tinta), como pede o kit; o azul fica para links, selos e o (+) */
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { background: var(--btn-bg-hover); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--hover); }
.btn-sm { padding: .35rem .75rem; font-size: .85rem; }
.btn[disabled] { opacity: .5; cursor: default; }

/* ---------- map ---------- */
#mapa {
  position: fixed;
  inset: 0;
  z-index: 1;
}

/* modo caça (Fase U, D5): botão redondo de 44px com binóculos no canto de
   cima; ligado, azul cheio. A distância até a obra que falta fica num chip ao
   lado (só com a caça ligada e a posição conhecida). */
.caca-wrap {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 4.3rem);
  left: 12px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: .5rem;
  pointer-events: none;
}
.caca-wrap > * { pointer-events: auto; }
.pill-caca {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper-glass);
  color: var(--primary-ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pill-caca svg { width: 23px; height: 23px; display: block; }
.pill-caca.on { background: var(--primary); border-color: var(--primary); color: #fff; }
@media (hover: hover) { .pill-caca:not(.on):hover { color: var(--primary-dark); } .pill-caca.on:hover { background: var(--primary-dark); } }
.pill-caca-dist {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-glass);
  color: var(--ink);
  font-size: .85rem;
  font-weight: 700;
  box-shadow: var(--shadow);
}

/* cidade sem obras (Fase U, D6): cartão acima da ilha, abaixo das telas (940) */
.cidade-vazia {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + 10px);
  width: min(440px, calc(100% - 32px));
  z-index: 920;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: .9rem 1rem 1rem;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.cv-texto { margin: 0; font-size: .95rem; line-height: 1.4; }
.cv-texto span { color: var(--muted); }
.cidade-vazia .btn { min-height: 44px; }
.cv-cidades { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.cv-rotulo { font-size: .8rem; font-weight: 600; color: var(--muted); }
/* primeiro achado (Fase G, round 4 D3): o mesmo lugar e a mesma caixa do
   cartão da cidade vazia (nunca os dois juntos, ver js/primeiro-achado.js) */
.primeiro-achado {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + 10px);
  width: min(440px, calc(100% - 32px));
  z-index: 920;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .9rem 1rem 1rem;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pa-titulo { margin: 0; padding-right: 40px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary-ink); }
.pa-linha { margin: 0; padding-right: 40px; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.pa-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: .4rem; }
.pa-acoes .btn { min-height: 44px; }
.pa-acoes .link-acao { min-height: 44px; font-size: .88rem; }
.pa-x {
  position: absolute; top: .35rem; right: .35rem;
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pa-x svg { width: 18px; height: 18px; }
.pa-x:hover { color: var(--ink); background: var(--paper-glass); }
/* Round 11, Fase X (D4): a faixa de um artista só no filtro ("Zaza's pieces · 5
   Clear"). O mesmo lugar dos cartões, uma barra pequena como uma .ah-sup; vence
   os cartões enquanto o filtro vale (js/artista.js) */
.faixa-artista {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + 10px);
  width: max-content;
  max-width: calc(100% - 32px);
  z-index: 920;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 0 14px;
  min-height: 48px;
  background: var(--card);
  color: var(--ink);
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
}
.faixa-artista > svg { flex: none; width: 20px; height: 20px; color: var(--primary-ink); }
.fa-texto { min-width: 0; font-size: .92rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-limpar { flex: none; min-height: 44px; padding: 0 10px; font-size: .9rem; }
/* com um dos cartões (ou a faixa) na tela, o zoom do mapa sobe para cima dele */
html.com-cidade-vazia .leaflet-bottom.leaflet-left .leaflet-control,
html.com-primeiro-achado .leaflet-bottom.leaflet-left .leaflet-control,
html.com-faixa-artista .leaflet-bottom.leaflet-left .leaflet-control { margin-bottom: calc(var(--tabbar-h) + var(--cv-h, 0px) + 20px); }

/* ilha de vidro (Fase B, brief 2026-09-26 VISUAL D4): a geometria da ilha do
   RaceLog+ (#404, docs/TABBAR-GLASS.md), em vidro CLARO. Cinco abas iguais de
   44px, só ícone; o (+) é um bloco azul elevado. Armadilhas copiadas:
   1. o vidro vive dentro do @supports; os valores sólidos fora dele são o
      fallback de quem não tem backdrop-filter (nunca apagar);
   2. brightness() faz o trabalho: com o tom .62 ele clareia o que passa por
      baixo, e o --ink segue com 4.5:1 mesmo sobre uma foto preta no feed.
      Nunca baixar o tom sem manter o brightness();
   3. o bloco do (+) é um span fora da regra dos rótulos (que mira [data-i18n]);
   4. nunca overflow: hidden na .ilha (o bloco do (+) passa da borda de cima);
   5. quem precisa ficar acima da barra usa --tabbar-h, não padding no body. */
.ilha {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(6px + env(safe-area-inset-bottom));
  width: min(440px, calc(100% - 16px));
  z-index: 950;
  display: flex;
  align-items: stretch;
  padding: 4px;
  border-radius: 20px;
  /* fallback sólido: o @supports abaixo põe o vidro por cima */
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ilha {
    background: rgba(255, 255, 255, .62);
    border-color: rgba(0, 0, 0, .08);
    -webkit-backdrop-filter: blur(20px) saturate(1.6) brightness(1.15);
    backdrop-filter: blur(20px) saturate(1.6) brightness(1.15);
    box-shadow:
      0 10px 36px rgba(0, 0, 0, .14),
      inset 0 1px 0 rgba(255, 255, 255, .9),
      inset 0 -1px 0 rgba(0, 0, 0, .05);
  }
  /* tema escuro: tom de tinta e o brightness() escurece o fundo (sempre em par) */
  @media (prefers-color-scheme: dark) {
    .ilha {
      background: rgba(25, 24, 22, .55);
      border-color: rgba(255, 255, 255, .14);
      -webkit-backdrop-filter: blur(20px) saturate(1.6) brightness(.7);
      backdrop-filter: blur(20px) saturate(1.6) brightness(.7);
      box-shadow:
        0 10px 36px rgba(0, 0, 0, .4),
        inset 0 1px 0 rgba(255, 255, 255, .12),
        inset 0 -1px 0 rgba(0, 0, 0, .25);
    }
  }
}
/* pediu menos transparência: ilha sólida de novo (depois do @supports para vencer) */
@media (prefers-reduced-transparency: reduce) {
  .ilha {
    background: var(--paper);
    border-color: var(--line);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.ilha-item {
  flex: 1;
  min-width: 0;
  height: 44px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--ink);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ilha-item svg { width: 25px; height: 25px; display: block; }
@media (hover: hover) { .ilha-item:not(.ativa):hover { color: var(--primary-dark); } }
/* LABELS (D4): delete this rule to bring the words back */
.ilha-item > [data-i18n] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* aba ativa: ícone azul + cápsula azulada com anel (duas pistas, não só a cor).
   O anel é sombra interna, então a cápsula não cresce 1px. No claro a cápsula
   tem uma base branca por baixo do tom azul: sobre fundo branco é igual ao tom
   puro, mas sobre uma foto escura no feed o vidro fica cinza médio e o ícone
   azul caía para 1.5:1; com a base ele fica acima de 3:1. Lição do RaceLog+:
   a cápsula se afasta do fundo que ameaça o ícone (no claro clareia). */
.ilha-item.ativa {
  color: var(--primary-ink);
  background: linear-gradient(rgba(55, 59, 255, .10), rgba(55, 59, 255, .10)), rgba(255, 255, 255, .75);
  box-shadow: inset 0 0 0 1px rgba(55, 59, 255, .30);
}
/* escuro: o mapa continua claro por baixo, então a cápsula escurece (base
   preta), como no RaceLog+; sem ela o ícone azul caía para 1.5:1 sobre o mapa */
@media (prefers-color-scheme: dark) {
  .ilha-item.ativa { background: linear-gradient(rgba(244, 107, 69, .12), rgba(244, 107, 69, .12)), rgba(0, 0, 0, .65); box-shadow: inset 0 0 0 1px rgba(244, 107, 69, .35); }
}
/* selo de pedidos de conexão no canto de cima à direita do ícone */
.ilha-item .ilha-badge { top: 0; right: auto; left: 50%; margin-left: 4px; }
/* (+): nunca ganha cápsula; o bloco azul sobe 2px acima da borda da ilha */
.ilha-acao {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* round 12 (D2): o (+) é o ponto azul com o mais branco: literalmente
   "adicionar um ponto". No escuro é o ponto laranja com o mais em tinta (o
   kit não põe branco sobre laranja: 3.0:1). */
.ilha-tile {
  width: 46px;
  height: 46px;
  /* -18px, como o -16px do RaceLog+ com o disco 4px maior: centrado na aba, o
     ponto passa 2px da borda de cima da ilha e parece elevado */
  margin-top: -18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(55, 59, 255, .40);
}
@media (prefers-color-scheme: dark) {
  .ilha-tile { background: #F46B45; color: #151515; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
  .ilha-tile .fila-badge { color: #151515; box-shadow: 0 0 0 2px #F46B45; }
  @media (hover: hover) { .ilha-acao:hover .ilha-tile { background: #F68A6B; } }
}
.ilha-tile svg { width: 22px; height: 22px; display: block; }
/* Fase F do round 10: achados guardados na fila offline. O .filtros-badge no
   canto do bloco azul, invertido (branco com número azul) para não sumir nele */
.ilha-tile { position: relative; }
.ilha-tile .fila-badge { top: -6px; right: -8px; background: #fff; color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
@media (hover: hover) { .ilha-acao:hover .ilha-tile { background: var(--primary-dark); } }

/* base neutra: as ruas do OSM competiam com os marcadores (amarelo, laranja,
   verde na mesma escala das peças). Dessaturar só o painel de tiles deixa a
   cidade em cinza e a cor vira dado — marcadores e cluster ficam intactos. */
.leaflet-tile-pane { filter: grayscale(.88) brightness(1.05) contrast(.92); }

/* round 12 (D4): cada obra é um ponto. Disco azul de 14 px com contorno branco
   de 2 px (o mapa é sempre claro) e a sombra de sempre, centrado numa caixa
   de 24 px (o alvo de toque cresce para 44 pelo ::after do bloco "Fase A").
   Aberta na ficha: um anel azul de 2 px a 3 px do disco. Achada: o selo verde
   de check no canto de cima. */
.pin-peca { display: block; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.pin-peca .corpo { fill: var(--primary); stroke: #fff; stroke-width: 2; }
.pin-peca .anel { display: none; fill: none; stroke: var(--primary); stroke-width: 2; }
.pin-peca.aberta .anel { display: block; }
/* já achada: MESMO ponto, com selo de check */
.pin-peca .selo { display: none; }
.pin-peca.achada .selo { display: block; }
.pin-peca.achada .selo circle { fill: var(--tile-green); stroke: #fff; stroke-width: 1.4; }
.pin-peca.achada .selo path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* cluster (round 12, D4): um ponto maior, azul com a contagem em branco
   (6.5:1) e o contorno branco dos pontos */
.cluster-pecas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
.cluster-pecas span {
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  line-height: 1;
}

/* ---------- modals ---------- */
.modal {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  width: min(92vw, 420px);
  max-height: calc(100dvh - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--shadow);
  background: var(--paper);
  color: var(--ink);
}
.modal::backdrop { background: rgba(20, 20, 20, .5); }

.modal form, .peca-detalhe { padding: 1.3rem 1.3rem 1rem; padding-bottom: max(1rem, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: .8rem; }

.modal h2 { margin: 0; font-size: 1.25rem; }
.modal-sub { margin: -.4rem 0 0; color: var(--muted); font-size: .88rem; }

.modal label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 600; }
.modal input {
  color: var(--ink);
  font: inherit;
  font-weight: 400;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  background: var(--card);
}
.modal input:focus { outline: 2px solid var(--primary); border-color: transparent; }

.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .3rem; }
.modal-foot { text-align: center; font-size: .83rem; margin: .2rem 0 0; }
.modal-foot a { color: var(--primary-ink); }

/* Fase Q (round 5, D1): um estilo só de erro e aviso, a nota neutra da Fase N
   (round 4): texto em tinta sobre o cinza de preenchimento, com um "i" num
   círculo desenhado pelo ::before (SVG por máscara, então pinta em currentColor
   nos dois temas). Nunca vermelho: o --tile-red é só do selo (.brand-tiles).
   O texto entra por textContent, um nó de texto que vira o item flex ao lado do
   ícone. Vazio não aparece (nem o cinza nem o ícone). */
.erro, .nota-neutra {
  display: flex; gap: .5rem; align-items: flex-start;
  color: var(--ink); background: var(--fill); border-radius: 10px;
  padding: .6rem .75rem; font-size: .85rem; line-height: 1.45; margin: 0; text-align: left;
}
.erro::before, .nota-neutra::before {
  content: ""; flex: 0 0 1.1em; width: 1.1em; height: 1.1em; margin-top: .1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7.6'/%3E%3Cpath d='M10 9.2v4.9'/%3E%3Ccircle cx='10' cy='6.3' r='.35' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7.6'/%3E%3Cpath d='M10 9.2v4.9'/%3E%3Ccircle cx='10' cy='6.3' r='.35' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
.erro:empty, .nota-neutra:empty { display: none; }
.login-escolha .nota-neutra, .login-escolha .erro { width: 100%; }
#btn-login-navegador { width: 100%; }

/* login: tela de escolha do método (estilo "Continue with…") */
.login-escolha { align-items: center; text-align: center; padding-top: 2rem !important; }
.login-escolha h2 { font-size: 1.35rem; }
.opcoes-login { display: flex; flex-direction: column; gap: .6rem; width: 100%; margin: .4rem 0; }
.btn-opcao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  padding: .95rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.btn-opcao:hover { border-color: var(--ink); }

/* foto do registro: quadro com pan/zoom, o que aparece é o que sobe. Vazio é
   quadrado; com foto de achado (Fase F) toma a proporção dela, 4:5 a 16:9 */
.foto-bloco { display: flex; flex-direction: column; gap: .3rem; }
.foto-quadro {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  touch-action: none; /* os gestos são do enquadramento, não da página */
}
.foto-quadro.tem-foto { border-style: solid; background: var(--ink); cursor: grab; }
.foto-quadro.tem-foto:active { cursor: grabbing; }
/* quadro livre: o aspect-ratio (posto pelo JS) vale para a área de dentro,
   sem a borda, para a foto caber inteira sem perder um fio */
.foto-quadro.enq-livre { box-sizing: content-box; width: auto; }
/* a imagem dentro de qualquer quadro de enquadramento (achado, avatar, troca) */
.enq-img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  max-height: none;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-drag: none;
}
.foto-vazia {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 400;
  cursor: pointer;
  padding: 1rem;
  text-align: center;
}
.foto-vazia svg.ic { width: 1.6em; height: 1.6em; }
.foto-vazia small { font-size: .75rem; opacity: .8; }
.foto-trocar {
  position: absolute;
  top: .55rem;
  right: .55rem;
  z-index: 3;
  border: none;
  border-radius: 999px;
  padding: .35rem .75rem;
  background: var(--paper-glass);
  color: var(--ink);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.foto-dica { margin: 0; font-size: .75rem; font-weight: 400; color: var(--muted); text-align: center; }

.loc-status { margin: 0; font-size: .83rem; color: var(--muted); }
.loc-status.ok { color: var(--ok); font-weight: 600; }
.loc-link { font-weight: 400 !important; color: var(--muted); }

/* peça detalhe */
.peca-detalhe img { width: 100%; border-radius: var(--radius); max-height: 300px; object-fit: cover; background: var(--line); }
/* a foto da ficha aparece inteira, na forma que tem (Fase F) */
#peca-foto { display: block; height: auto; max-height: min(60vh, 520px); object-fit: contain; background: var(--fill); }

.lista-achados { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; max-height: 50vh; overflow-y: auto; }
.lista-achados li {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
}
.lista-achados img { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; background: var(--line); }
.lista-achados .quando { font-size: .78rem; color: var(--muted); }
.lista-achados .nome { font-weight: 600; font-size: .9rem; }
.lista-achados .achado-info { flex: 1; min-width: 0; }
.achado-del {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.achado-del:hover { color: var(--ink); background: var(--hover); }
.achado-del svg.ic { width: 18px; height: 18px; }
/* Fase H: compartilhar o card do achado, ao lado da lixeira e com o mesmo jeito */
.achado-partilhar {
  width: 44px; height: 44px; border: none; border-radius: 50%; background: none; color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.achado-partilhar:hover { color: var(--ink); background: var(--hover); }
.achado-partilhar svg.ic { width: 18px; height: 18px; }
.achado-partilhar:disabled { opacity: .5; cursor: default; }

/* sobe o zoom do Leaflet para ficar acima da ilha */
.leaflet-bottom.leaflet-left .leaflet-control { margin-bottom: calc(var(--tabbar-h) + 6px); }
/* a atribuição do OSM (obrigatória) também sobe quando a ilha ocupa a largura
   toda; acima de 760px a ilha de 440px fica no meio e não chega no canto */
@media (max-width: 760px) {
  .leaflet-bottom.leaflet-right .leaflet-control { margin-bottom: calc(var(--tabbar-h) - 4px); }
}


/* apresentação em slides */
.slide { display: flex; flex-direction: column; gap: .8rem; }
.slide .modal-sub { margin: 0; }
.slide-nav { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .2rem; }
.slide-dots { display: flex; gap: .5rem; }
.slide-dot { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; }
.slide-dot.on { background: var(--primary); }
.slide-nav .modal-actions { margin-top: 0; }

.modal select, .modal textarea {
  color: var(--ink);
  font: inherit; font-weight: 400; padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  resize: vertical;
}
.linha-check { flex-direction: row !important; align-items: center; gap: .5rem !important; }
.linha-check input { width: auto; }

/* perfil */
.pf-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--line); flex-shrink: 0; }
.rotulo-campo { font-size: .85rem; font-weight: 600; }

/* avatar no perfil: mesmo enquadrador do achado, com máscara redonda
   (o recorte sobe quadrado; redondo é como o avatar aparece no app) */
.foto-quadro-avatar { width: 132px; border-radius: 50%; align-self: flex-start; }
.foto-quadro-avatar .foto-vazia { font-size: .72rem; gap: .2rem; padding: .4rem; }
.foto-quadro-avatar .foto-trocar {
  top: auto;
  bottom: .5rem;
  right: 50%;
  transform: translateX(50%);
  padding: .2rem .6rem;
  font-size: .68rem;
}
.pf-avatar-atual { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* fechar padrão: X redondo no canto superior direito de todo pop-up */
.modal > form, .modal > div { position: relative; }
.modal-x {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 5;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--paper-glass);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.modal-x svg { width: 18px; height: 18px; }
.modal-x:hover { background: var(--card); }

/* ações da ficha: ícones redondos (estilo RaceLog+), um único com destaque */
.ico-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ico-btn svg { width: 20px; height: 20px; }
.ico-btn:hover { border-color: var(--ink); }
.ico-btn.destaque { background: var(--primary); border-color: transparent; color: #fff; }
.ico-btn.destaque:hover { background: var(--primary-dark); }
.ico-btn[disabled] { opacity: .5; cursor: default; }

/* ficha da peça e perfil público: fatos em texto corrido com ícone, sem caixinhas */
.peca-fatos { display: flex; flex-direction: column; gap: .25rem; margin: -.2rem 0 0; }
.peca-fatos .fato { margin: 0; font-size: .85rem; color: var(--ink); }
.peca-fatos .fato > svg.ic { color: var(--primary-ink); vertical-align: -.2em; margin-right: .15rem; }
.voce-achou { color: var(--ok); font-weight: 700; }
.voce-achou svg.ic { vertical-align: -.2em; }
/* ficha da peça */
.peca-meta { margin: -.3rem 0 0; font-size: .82rem; color: var(--muted); }
.peca-endereco { margin: -.3rem 0 0; font-size: .85rem; color: var(--ink); }
.peca-endereco svg.ic { vertical-align: -.2em; }
.selo-validada {
  display: inline-flex; align-items: center; gap: .25rem; margin-left: .5rem;
  font-size: .68rem; font-weight: 700; color: var(--ok);
  border: 1px solid var(--ok); border-radius: 999px; padding: .1rem .5rem;
  vertical-align: middle; white-space: nowrap;
}
/* legenda da foto em destaque: autor na esquerda, data na direita,
   comentário embaixo com identidade própria */
.foto-legenda {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: -.5rem 0 0;
  font-size: .8rem;
  color: var(--muted);
}
.leg-linha { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.leg-coment {
  margin: 0;
  font-size: .85rem;
  font-style: italic;
  color: var(--ink);
  background: var(--fill);
  border-radius: 6px;
  padding: .4rem .6rem;
}
.link-autor {
  border: none;
  background: none;
  padding: 0;
  color: var(--primary-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
/* grade de fotos dentro da ficha/perfil: mesma linguagem do acervo, menor */
/* coletânea na ficha: tira compacta que rola na horizontal, sem caixa alta */
.acervo-grade.galeria-grade { display: flex; grid-template-columns: none; gap: 5px; max-height: none; padding: 0; background: none; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.acervo-grade.galeria-grade .tessela { width: 66px; flex: 0 0 auto; border-radius: 8px; }
.tessela.minha { outline: 2px solid var(--tile-green); outline-offset: -2px; }
.tessela.selecionada { outline: 2px solid var(--primary); outline-offset: -2px; }

/* perfil público — cabeçalho aguenta apelido comprido sem desalinhar:
   min-width:0 deixa o texto encolher e quebrar em vez de estourar o modal */
.pub-cabeca { display: flex; align-items: center; gap: .7rem; padding-right: 2.2rem; }
.pub-cabeca > div { min-width: 0; }
.pub-cabeca h2 { font-size: 1.1rem; overflow-wrap: anywhere; line-height: 1.2; }
.pub-cabeca .modal-sub { margin: .1rem 0 0; }
/* vence o width:100% e o raio de .peca-detalhe img */
.pub-cabeca .pf-avatar { width: 52px; height: 52px; border-radius: 50%; }
.pub-avatar-ini {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--tile-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.3rem;
  flex-shrink: 0;
}

/* toast de conquista */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + 10px);
  z-index: 1200; display: flex; align-items: center; gap: .45rem;
  background: var(--tile-dark); color: #fff; font-size: .9rem; font-weight: 600;
  padding: .65rem 1.1rem; border-radius: 999px; box-shadow: var(--shadow);
  max-width: 88vw; transition: opacity .8s;
}
.toast svg.ic { color: var(--tile-green); }
.toast.some { opacity: 0; }
/* Fase V: o toast vira popover (acima de um <dialog> aberto); tira o que o
   navegador põe em [popover] e mantém a posição de sempre */
.toast[popover] { margin: 0; border: 0; top: auto; right: auto; overflow: visible; inset-inline-end: auto; inset-block-start: auto; }

/* boas-vindas */
.bemvindo { text-align: left; }
.bemvindo ul { margin: .2rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .55rem; font-size: .92rem; }
.bemvindo li { display: flex; gap: .55rem; }
.bemvindo li svg.ic { margin-top: .18em; color: var(--primary-ink); }
.bemvindo .assinatura { color: var(--muted); font-size: .82rem; margin: .3rem 0 0; font-style: italic; }

/* acervo: mosaico de fotos quadradas sobre "rejunte" — quanto mais peças no
   acervo, mais colunas e menor a tessela: a galeria vai ficando pixelada,
   como um mosaico de verdade. Toque na tessela abre a ficha. */
.modal.modal-larga { width: min(94vw, 640px); }
.acervo-grade {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: 3px;
  padding: 3px;
  background: var(--fill);
  border-radius: 10px;
  max-height: 62vh;
  overflow-y: auto;
}
.tessela {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  border-radius: 2px;
  overflow: hidden;
  background: var(--line);
  cursor: pointer;
}
.tessela img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  display: block;
  border-radius: 2px; /* vence o raio grande de .peca-detalhe img */
}
.tessela.memoria img { filter: grayscale(.85) opacity(.75); }
.tessela .selo-achada {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--tile-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.tessela .selo-achada svg { width: 9px; height: 9px; }



/* "é uma destas?" — candidatas próximas no registro */
.candidatas-lista { display: flex; flex-direction: column; gap: .55rem; }
.candidata {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.candidata:hover { border-color: var(--primary); }
.candidata img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--line); flex-shrink: 0; }
.candidata-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.candidata-info strong { font-size: .92rem; }
.candidata-info span { font-size: .8rem; color: var(--muted); }
/* Fase R: a linha provável (a mais perto, a até 15 m, sem galeria) e a galeria */
.candidata.provavel { border-color: var(--primary); }
.candidata-info .cand-provavel {
  align-self: flex-start; padding: .1rem .5rem; border-radius: 999px;
  background: var(--primary); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .01em;
}
#modal-candidatas.em-galeria .candidatas-lista { max-height: min(52dvh, 460px); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
/* dois botões longos num modal de 420px: um por linha, o primário em cima */
#modal-candidatas.em-galeria .modal-actions { flex-direction: column-reverse; align-items: stretch; }
/* Fase V: modo mover. Sem "descoberta nova"; perto primeiro, depois a busca */
#modal-candidatas.modo-mover .modal-actions { display: none; }
#modal-candidatas.modo-mover .candidatas-lista { max-height: min(40dvh, 360px); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.cand-busca { display: flex; flex-direction: column; gap: .55rem; margin-top: .8rem; }
.cand-busca input { width: 100%; }
.cand-vazio { margin: 0; font-size: .82rem; color: var(--muted); }
#cand-resultados:empty { display: none; }



/* artista na ficha: "por X", "provavelmente X", botões pequenos */
.selo-provavel {
  display: inline-flex; align-items: center; gap: .25rem; margin-left: .4rem;
  font-size: .68rem; font-weight: 700; color: var(--muted);
  border: 1px dashed var(--muted); border-radius: 999px; padding: .1rem .5rem; vertical-align: middle; white-space: nowrap;
}
.link-acao {
  border: none; background: none; padding: 0; color: var(--primary-ink); font: inherit; font-size: .82rem;
  font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.sugestoes { display: flex; flex-direction: column; gap: .4rem; }
.sugestao {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: .88rem;
}
.sugestao strong { flex: 1; }
.sugestao .apoios { font-size: .75rem; color: var(--muted); }
.ou-linha { text-align: center; font-size: .78rem; color: var(--muted); margin: 0; }

/* consentimento e zona de perigo */
.consentimento { display: flex; flex-direction: column; gap: .5rem; padding: .7rem .8rem; background: var(--fill); border-radius: 10px; }
.consentimento label { flex-direction: row !important; align-items: flex-start; gap: .5rem !important; font-weight: 500 !important; font-size: .83rem !important; line-height: 1.4; }
.consentimento input { width: auto; margin-top: .15rem; }
.consentimento a { color: var(--primary-ink); }
/* ação destrutiva: discreta, sem vermelho (regra do Vini); o confirm segura o toque */
.btn-perigo { background: transparent; color: var(--muted); border-color: var(--line); }
.btn-perigo:hover { background: var(--hover); color: var(--ink); }
.zona-perigo { border-top: 1px solid var(--line); padding-top: .6rem; margin-top: .2rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .8rem; color: var(--muted); }

/* candidata que você já achou: selo discreto e ar de "concluída" */
.candidata.ja-achei { border-style: dashed; }
.cand-ja { display: inline-flex; align-items: center; gap: .2rem; margin-top: .15rem; font-size: .72rem; font-weight: 700; color: var(--ok); }
.cand-ja svg.ic { width: 1em; height: 1em; }

/* mapa para marcar o ponto (pino) no registro */
.pin-mapa { height: min(52vh, 360px); width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }

/* chip de Instagram do artista na ficha */
.insta-chip { display: inline-flex; align-items: center; gap: .2rem; margin-left: .3rem; font-size: .82rem; font-weight: 600; color: var(--primary-ink); text-decoration: none; vertical-align: -.15em; }
.insta-chip svg.ic { width: 1.05em; height: 1.05em; }
.insta-chip:hover { text-decoration: underline; }


/* painel de filtros (B2) */
.filtro-corpo { display: flex; flex-direction: column; gap: .9rem; max-height: 62vh; overflow-y: auto; margin: .2rem 0 .4rem; }
.f-grupo .f-titulo { margin: 0 0 .4rem; font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.f-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.f-chip { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--radius-ctl); padding: .34rem .72rem; font: inherit; font-size: .85rem; cursor: pointer; }
.f-chip.on { background: var(--primary); color: #fff; border-color: var(--primary); }

/* tags na ficha da peça */
.peca-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: -.1rem 0 .1rem; }
/* tags: só mostram (sem toque); coleções são link para /c/<slug> */
.tag-chip { border: 1px solid var(--line); background: var(--fill); color: var(--ink); border-radius: var(--radius-ctl); padding: .25rem .6rem; font: inherit; font-size: .78rem; cursor: default; }
.tag-chip.tag-link { cursor: pointer; text-decoration: none; }
.tag-chip.tag-link:hover { border-color: var(--primary); }

/* ===== Feed (Fase F): um cartão por achado, como o Instagram ===== */
.feed-cab { display: flex; align-items: center; gap: .5rem; }
.feed-cab h2 { flex: 1; min-width: 0; }
.feed-lista { display: flex; flex-direction: column; gap: 1.1rem; width: 100%; max-width: 540px; align-self: center; }
.feed-sentinela { height: 1px; }
.feed-erro { color: var(--muted); font-size: .9rem; text-align: center; padding: 1rem 0; }
/* puxar para atualizar: cresce com o gesto, gira, e fica azul quando basta soltar */
.feed-ptr { height: 0; overflow: hidden; display: grid; place-items: center; color: var(--muted); transition: height .15s ease; margin: -.4rem 0; }
.feed-ptr svg { width: 22px; height: 22px; transform: rotate(var(--giro, 0deg)); }
.feed-ptr.pronto { color: var(--primary-ink); }

.fcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fcard-cab { display: flex; align-items: center; gap: .35rem; padding: .5rem .7rem; min-height: 52px; font-size: .9rem; }
.fcard-quem { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.fcard-quem strong { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; font-size: .9rem; display: grid; place-items: center; overflow: hidden; }
.feed-av img { width: 100%; height: 100%; object-fit: cover; }
.fcard-quando { color: var(--muted); white-space: nowrap; }
.fcard-cidade { margin-left: auto; padding-left: .5rem; color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
/* a foto inteira, na forma dela (Fase F). Até a foto de verdade carregar, a
   caixa guarda um 4:5 para a lista não pular e o ladrilho neutro cobre tudo */
.fcard-foto { position: relative; background: var(--fill); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.fcard-foto img { width: 100%; height: auto; max-height: min(85vh, 720px); object-fit: contain; background: var(--fill); display: block; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.fcard-foto:not(.carregada) { aspect-ratio: 4 / 5; }
.fcard-foto:not(.carregada) img { position: absolute; inset: 0; height: 100%; max-height: none; object-fit: cover; }
.fcard-foto:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
/* dois toques: a marca da curtida aparece por cima da foto e some */
.fcard-pop { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; color: #fff; }
.fcard-pop svg.ic { width: 96px; height: 96px; fill: var(--primary); stroke: #fff; stroke-width: 1.2; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35)); }
.fcard-pop.on { animation: fcardPop .8s ease-out both; }
@keyframes fcardPop { 0% { opacity: 0; transform: scale(.5); } 20% { opacity: 1; transform: scale(1.1); } 35% { transform: scale(.95); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .fcard-pop.on { animation: fcardPopCalmo .8s linear both; } @keyframes fcardPopCalmo { 0%, 70% { opacity: 1; } 100% { opacity: 0; } } }
.fcard-acoes { display: flex; align-items: center; gap: .15rem; padding: .25rem .35rem 0; }
.fcard-btn { display: inline-flex; align-items: center; gap: .35rem; min-width: 44px; min-height: 44px; padding: 0 .55rem; border: 0; border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.fcard-btn:hover { background: var(--hover); }
.fcard-btn svg.ic { width: 24px; height: 24px; flex: none; }
.fcard-btn[disabled] { opacity: .5; cursor: default; }
.fcard-curtir svg.ic { color: var(--primary-ink); }
.fcard-curtir.on svg.ic { fill: var(--primary); }
.fcard-n:empty { display: none; }
.fcard-mapa { font-weight: 600; font-size: .86rem; }
.fcard-mapa svg.ic { width: 20px; height: 20px; color: var(--primary-ink); }
.fcard-partilhar { margin-left: auto; }
.fcard-legenda { display: flex; flex-direction: column; gap: .2rem; padding: .1rem .9rem .85rem; font-size: .9rem; line-height: 1.4; }
.fcard-peca { align-self: flex-start; padding: 0; min-height: 32px; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.fcard-peca:hover { text-decoration: underline; }
.fcard-artista { margin: 0; color: var(--muted); }
.fcard-artista strong, .fcard-artista .link-autor { color: var(--ink); }
.fcard-coment { margin: 0; overflow-wrap: anywhere; white-space: pre-line; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.fcard-coment.aberto { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.fcard-mais { align-self: flex-start; min-height: 32px; font-size: .86rem; color: var(--muted); }
/* o achado que acabou de entrar (vindo do toast "Ver no feed") */
.fcard-novo { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); transition: box-shadow .6s, border-color .6s; }
/* esqueleto enquanto carrega */
.fcard-esqueleto .fcard-legenda { gap: .45rem; padding-top: .8rem; }
.esq { display: block; background: var(--line); border-radius: 6px; }
.esq-av { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.esq-linha { height: 12px; width: 60%; }
.esq-linha.curta { width: 35%; }
.esq-foto { aspect-ratio: 4 / 5; border-radius: 0; }
@media (prefers-reduced-motion: no-preference) {
  .fcard-esqueleto .esq { animation: esqPulso 1.2s ease-in-out infinite; }
  @keyframes esqPulso { 50% { opacity: .5; } }
}
/* celular: o feed vai de ponta a ponta, como o Instagram */
@media (max-width: 520px) {
  .tela .fcard { margin: 0 -16px; border-radius: 0; border-left: 0; border-right: 0; }
}
@media (max-width: 360px) { .fcard-mapa .fcard-rot { display: none; } }

/* botão Filtros no topo, com o número de filtros ativos */
.btn-icone { position: relative; width: 44px; height: 44px; padding: 0; }
.btn-icone svg { width: 22px; height: 22px; display: block; }
.filtros-badge { position: absolute; top: 2px; right: 2px; background: var(--primary); color: #fff; border-radius: 999px; font-size: 11px; min-width: 18px; height: 18px; line-height: 18px; text-align: center; padding: 0 4px; font-weight: 700; }
.modal-foto { border: 0; padding: 0; width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; background: rgba(16,16,16,.95); overflow: hidden; touch-action: none; overscroll-behavior: none; }
.modal-foto::backdrop { background: rgba(0,0,0,.7); }
.modal-foto img { width: 100%; height: 100%; object-fit: contain; display: block; touch-action: none; transform-origin: 0 0; will-change: transform; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.foto-cheia-x { position: fixed; top: 14px; right: 14px; z-index: 2; background: rgba(0,0,0,.45); color: #fff; border: 0; border-radius: 50%; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.foto-cheia-x svg { width: 22px; height: 22px; }
/* botão da foto da ficha: bloco inteiro clicável, ícone de expandir no canto */
.peca-foto-btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: zoom-in; border-radius: var(--radius); overflow: hidden; -webkit-tap-highlight-color: transparent; }
.peca-foto-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.peca-foto-expandir { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; display: grid; place-items: center; pointer-events: none; }
.peca-foto-expandir svg { width: 16px; height: 16px; }
.peca-card:has(#peca-foto-removida:not(.hidden)) .peca-foto-expandir { display: none; }
.peca-card:has(#peca-foto-removida:not(.hidden)) .peca-foto-btn { cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modalIn .18s ease-out both; }
  .modal[open]::backdrop { animation: fadeIn .18s ease-out both; }
  .modal-foto[open] { animation: fadeIn .16s ease-out both; }
  body { animation: fadeIn .22s ease-out both; }
  @keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
}

/* aviso protetor no "registrar achado": reforça o combinado no ato */
.reg-aviso { margin: -.3rem 0 0; font-size: .78rem; line-height: 1.4; color: var(--muted); text-align: right; }
/* Fase U (D4): o registro em duas camadas; a segunda abre por um link só */
.reg-detalhes-link { align-self: flex-start; min-height: 44px; font-size: .9rem; }
.reg-detalhes { display: flex; flex-direction: column; gap: .8rem; }
/* Round 7 (D1): "Who made it?" no registro e na folha "New piece". O
   Instagram só aparece para nome novo, com o "@" fixo dentro do campo */
.reg-artista { gap: .6rem; }
.campo-arroba {
  display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
}
.campo-arroba > span { padding: 0 0 0 .7rem; color: var(--muted); font-weight: 600; }
.modal .campo-arroba input { flex: 1; min-width: 0; border: 0; background: none; padding-left: .2rem; }
.campo-arroba:focus-within { outline: 2px solid var(--primary); border-color: transparent; }
.modal .campo-arroba input:focus { outline: none; }
.np-acoes { justify-content: space-between; align-items: center; }
.np-acoes .link-acao { min-height: 44px; padding: 0 .3rem; font-size: .9rem; }

/* editor único da peça: seções empilhadas, cada uma some conforme a permissão */
.ed-bloco { display: flex; flex-direction: column; gap: .4rem; }
.ed-rotulo { font-size: .85rem; font-weight: 700; color: var(--ink); }
.ed-foto-linha { display: flex; align-items: center; gap: .8rem; }
#ed-foto-thumb { width: 66px; height: 66px; border-radius: 10px; object-fit: cover; background: var(--line); flex: none; }
.ed-admin { display: flex; flex-direction: column; gap: .8rem; border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .2rem; }
/* Fase V: "Wrong piece? Move this find", uma linha tocável abaixo das fotos */
.ed-mover {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; min-height: 48px;
  margin-top: .2rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.ed-mover:hover { background: var(--hover); }
.ed-mover-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ed-mover-txt strong { font-size: .88rem; font-weight: 600; }
.ed-mover-txt small { font-size: .76rem; color: var(--muted); }
.ed-mover svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.ed-rodape { justify-content: space-between; align-items: center; }

/* dica de campo (ex.: formato do Instagram) */
.campo-dica { font-weight: 400; font-size: .76rem; color: var(--muted); margin-top: .1rem; }
/* editor: ações de "quem fez?" viram botões, não links minúsculos */
.ed-botoes { display: flex; flex-wrap: wrap; gap: .4rem; }
.btn.btn-perigo { color: var(--muted); border-color: var(--line); background: var(--card); }
.btn.btn-perigo:hover { background: var(--hover); color: var(--ink); }
.link-acao.link-perigo, .link-acao.link-muted { color: var(--muted); }
/* linhas de sugestão de artista: cabeçalho + ações + edição inline */
.sugestao { display: flex; flex-direction: column; gap: .4rem; padding: .6rem; border: 1px solid var(--line); border-radius: 10px; }
.sugestao-cab { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.sugestao-cab .apoios { margin-left: auto; color: var(--muted); font-size: .82rem; }
.sugestao-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.sugestao-edit { display: flex; flex-direction: column; gap: .5rem; }


/* ===== Fase U1: telas cheias da barra (Feed, Coleção, Perfil) =====
   dialog NÃO modal (dialog.show): fica entre o topo e a barra, e a barra de
   baixo continua tocável. z-index abaixo da barra (950) e do topo (1000). */
.tela {
  position: fixed;
  inset: 0;
  z-index: 940;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.tela-corpo {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 4.4rem) 16px calc(var(--tabbar-h) + 1rem);
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.tela-corpo { position: relative; }
.tela h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; }
.tela-stats { margin: -.4rem 0 0; font-size: .88rem; color: var(--ink); }
.tela .modal-sub { margin: 0; }
.tela .acervo-grade, .tela .lista-achados { max-height: none; overflow: visible; }

/* controle segmentado (padrão RaceLog+: aba sublinhada, cor primária na ativa) */
.seg { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.seg-btn {
  flex: 1;
  min-height: 44px;
  padding: .55rem .4rem;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seg-btn.on { color: var(--ink); border-bottom-color: var(--primary); }

/* lista de "Meus" na Coleção: a linha inteira abre a ficha; a lixeira é discreta */
.lista-achados li { padding: 0; gap: 0; }
.achado-abrir {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.achado-abrir .achado-info { display: flex; flex-direction: column; gap: .1rem; }
.achado-abrir .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.achado-del { width: 44px; height: 44px; margin-right: .3rem; }

/* perfil (Fase P, brief VISUAL 5.3): o hub do RaceLog+ (Componente 13).
   1. A coluna de ícones flutua em .perfil-cabeca (não é item flex do topo):
      um ícone a mais nunca empurra o avatar para baixo.
   2. Ela é o primeiro filho (um float só afeta o que vem depois).
   3. .perfil-cabeca tem o clearfix.
   4. O padding horizontal mora só em .perfil-cabeca. */
.perfil-cabeca { padding: 0 4px; }
.perfil-cabeca::after { content: ""; display: block; clear: both; }
.perfil-acoes { float: right; display: flex; flex-direction: column; gap: 8px; margin-left: 12px; }
.p-ic { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; cursor: pointer; }
.p-ic svg { width: 15px; height: 15px; }
@media (hover: hover) { .p-ic:hover { border-color: var(--primary); color: var(--primary-ink); } }
.p-ic:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.perfil-topo { display: flex; align-items: center; gap: 16px; padding: 4px 0 8px; }
.tp-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--line); flex: none; }
.tp-avatar-ini { display: flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-weight: 800; font-size: 2rem; }
.perfil-nome { flex: 1; min-width: 0; }
.perfil-nome h2 { overflow-wrap: anywhere; line-height: 1.2; }
.perfil-nome .modal-sub { margin-top: .2rem; }
@media (max-width: 520px) { .perfil-parte { display: block; } .perfil-sep { display: none; } }
.tp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.tp-tile { display: flex; flex-direction: column; gap: .1rem; padding: .8rem .9rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.tp-tile b { font-size: 1.6rem; line-height: 1.1; }
.tp-tile span { font-size: .85rem; color: var(--ink); }
.tp-apagar { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; margin-top: 1rem; font-size: .8rem; color: var(--muted); }
.tp-apagar .link-acao { min-height: 44px; font-size: .88rem; }

/* dica de primeira vez no (+): balão acima do botão */
.coach {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + 4px);
  z-index: 960;
  display: flex;
  align-items: center;
  gap: .8rem;
  max-width: calc(100vw - 32px);
  padding: .65rem .8rem .65rem 1rem;
  background: var(--primary);
  color: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  font-size: .92rem;
  font-weight: 700;
}
.coach::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: var(--primary);
  transform: translateX(-50%) rotate(45deg);
}
.coach { width: max-content; }
.coach .link-acao { color: #fff; min-height: 44px; font-size: .88rem; white-space: nowrap; }
/* a dica do modo caça fica embaixo do botão de binóculos, seta para cima;
   abaixo das telas (940), então some quando uma tela abre */
.coach.coach-caca {
  left: 12px;
  right: auto;
  transform: none;
  bottom: auto;
  top: calc(env(safe-area-inset-top) + 4.3rem + 44px + 12px);
  z-index: 930;
  max-width: calc(100vw - 24px);
}
.coach.coach-caca::after { top: -7px; bottom: auto; left: 22px; }

/* onboarding em duas telas */
.slide-chapeu { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary-ink); }
.onb-quadro { width: 88px; align-self: center; }
.onb-quadro .foto-vazia span { font-size: .68rem; line-height: 1.2; }
.onb-apelido { flex: 1; min-width: 0; }
.onb-nota { margin: -.3rem 0 0; font-size: .85rem; color: var(--muted); }
.onb-gps { align-self: flex-start; min-height: 44px; }
#form-onb-cidade .f-titulo { margin: .2rem 0 0; font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.f-chip { min-height: 36px; }

/* ===== Fase U2: ficha de uma face, folha "...", registro e editor ===== */
/* ficha */
.peca-card #peca-nome { padding-right: 0; }
.peca-fatos .fato-sec { color: var(--muted); font-size: .82rem; }
.fato-dica { color: var(--muted); font-size: .8rem; }
.link-acao[disabled] { color: var(--muted); text-decoration: none; cursor: default; }
.peca-status { margin: 0; font-size: .92rem; font-weight: 600; color: var(--ink); }
.peca-status.achei { color: var(--ok); }
.peca-cacadores { display: flex; align-items: center; gap: 0; min-height: 0; }
.peca-cacadores:empty { display: none; }
.cacador {
  width: 34px; height: 34px; margin-left: -6px; padding: 0; border: 2px solid var(--paper); border-radius: 50%;
  background: var(--primary); color: #fff; font: inherit; font-size: .8rem; font-weight: 800;
  display: grid; place-items: center; overflow: hidden; cursor: pointer; flex: none;
}
.cacador:first-child { margin-left: 0; }
.cacador img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; max-height: none; }
.cacador.eu { box-shadow: 0 0 0 2px var(--tile-green); }
.cacador-mais { margin-left: .45rem; font-size: .8rem; font-weight: 700; color: var(--muted); }
.peca-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.peca-acoes .btn { min-height: 44px; white-space: nowrap; }
.peca-acoes .btn-primary { flex: 1 1 auto; }
.peca-acoes .ico-btn { margin-left: auto; }
.ico-btn svg { width: 20px; height: 20px; }

/* folha de ações ("...") */
.modal-folha .peca-detalhe { gap: .5rem; }
.folha-titulo { font-size: 1rem !important; color: var(--muted); font-weight: 700; margin: 0 0 .2rem !important; }
.folha-lista { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.folha-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; min-height: 52px; padding: .7rem .95rem;
  border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink);
  font: inherit; font-size: .98rem; font-weight: 600; text-align: left; cursor: pointer;
}
.folha-item:first-child { border-top: 0; }
.folha-item:hover:not([disabled]) { background: var(--hover); }
.folha-item[disabled] { cursor: default; color: var(--muted); }
.folha-item small { font-size: .8rem; font-weight: 400; color: var(--muted); }
.folha-item.folha-discreta { color: var(--muted); font-weight: 500; }
/* folha com ícone (Fase H: "Share as", a forma de cada card) */
.folha-item.folha-com-ic { flex-direction: row; align-items: center; gap: .8rem; }
.folha-ic { display: flex; color: var(--muted); }
.folha-ic svg.ic-forma { width: 24px; height: 28px; }
.folha-ok { margin-left: auto; display: flex; color: var(--primary-ink); }
.folha-ok svg.ic { width: 18px; height: 18px; }
.folha-atual .folha-ic { color: var(--primary-ink); }
.folha-cancelar { min-height: 44px; }
@media (max-width: 520px) {
  /* no celular a folha encosta embaixo, como folha de ações do sistema */
  .modal.modal-folha { margin: auto auto 0; width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; }
}

/* comentários de um achado (Fase C): folha com a lista e uma linha para
   escrever. No celular encosta embaixo (modal-folha); a lista rola, a linha
   de escrever fica sempre à vista. Apagar o próprio é um "x" cinza (sem vermelho). */
.fcard-comentar svg.ic { color: var(--ink); }
.modal-comentarios { overflow: hidden; }
.cm-caixa {
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.1rem 1.1rem .8rem; padding-bottom: max(.8rem, env(safe-area-inset-bottom));
  max-height: min(84dvh, 680px);
}
.cm-caixa h2 { padding-right: 48px; }
.cm-caixa .modal-sub { margin: -.35rem 0 0; padding-right: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-lista {
  list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 96px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: .15rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cm-vazio { padding: 1.2rem .2rem; color: var(--muted); font-size: .9rem; text-align: center; }
.cm-item { display: flex; align-items: flex-start; gap: .55rem; padding: .5rem 0; }
.cm-item + .cm-item { border-top: 1px solid var(--line); }
.cm-quem { flex: none; padding: 0; border: 0; background: none; cursor: pointer; min-width: 44px; min-height: 44px; display: grid; place-items: start center; padding-top: 2px; }
.cm-av { width: 32px; height: 32px; font-size: .85rem; }
.cm-corpo { flex: 1; min-width: 0; }
.cm-cab { display: flex; align-items: baseline; gap: .3rem; font-size: .86rem; min-width: 0; }
.cm-nome { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-nome:hover { text-decoration: underline; }
.cm-quando { color: var(--muted); white-space: nowrap; }
.cm-texto { margin: .1rem 0 0; font-size: .93rem; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-line; }
.cm-acao {
  flex: none; width: 44px; height: 44px; margin: -6px -6px 0 0; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer;
}
.cm-acao svg { width: 18px; height: 18px; }
.cm-acao:hover:not([disabled]) { background: var(--hover); color: var(--ink); }
.cm-acao[disabled] { opacity: .5; cursor: default; }
.cm-aviso { margin: 0; font-size: .86rem; color: var(--ink); background: var(--soft); border-radius: 8px; padding: .45rem .7rem; }
.modal .cm-form { padding: 0; flex-direction: row; align-items: center; gap: .5rem; }
.modal .cm-form[hidden] { display: none; }
.cm-form input { flex: 1; min-width: 0; min-height: 44px; font-size: 1rem; }
.cm-form .btn { min-height: 44px; flex: none; }
.cm-conta { align-self: flex-end; margin-top: -.3rem; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cm-conta.perto { color: var(--ink); font-weight: 700; }
.cm-conta[hidden] { display: none; }

/* registro: local em uma linha (mini-mapa + texto), "Outras formas" recolhido */
.loc-bloco { display: flex; flex-direction: column; gap: .45rem; }
.loc-linha { display: flex; align-items: center; gap: .8rem; }
.minimapa {
  flex: none; width: 96px; height: 96px; padding: 0; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: var(--fill); cursor: pointer; position: relative;
}
.minimapa .leaflet-control-container { display: none; }
.minimapa:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.loc-texto { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; min-width: 0; }
.loc-texto .link-acao { min-height: 32px; font-size: .88rem; }
.loc-endereco { margin: 0; font-size: .9rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.loc-status { margin: 0; font-size: .83rem; color: var(--muted); }
.loc-status.ok { color: var(--ok); font-weight: 600; }
.loc-link { font-weight: 400 !important; color: var(--muted); }
.loc-outras summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--primary-ink); min-height: 32px; display: flex; align-items: center; }
.loc-outras-corpo { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; padding-top: .4rem; }
.loc-outras-corpo .loc-link { align-self: stretch; }
.cand-add { font-size: .8rem !important; font-weight: 700; color: var(--primary-ink) !important; }

/* aviso de versão nova (Fase W, js/sw-registro.js): uma linha no topo,
   tocar recarrega. Popover (camada de cima, acima de um <dialog>) quando o
   navegador tem; senão fixed. Classe própria: o toast() do app apaga .toast. */
.sw-aviso {
  position: fixed; inset: auto; top: calc(env(safe-area-inset-top) + 12px); left: 50%; transform: translateX(-50%);
  margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; z-index: 1300; max-width: 92vw;
}
.sw-toast {
  display: block; max-width: 100%; min-height: 44px; padding: .65rem 1.2rem; border: 0; border-radius: 999px;
  background: var(--tile-dark); color: #fff; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* toast com botão (dar nome à descoberta) */
.toast { pointer-events: auto; }
.toast-acao { gap: .7rem; padding-right: .5rem; }
.toast-btn {
  flex: none; min-height: 36px; padding: 0 .9rem; border: 0; border-radius: 999px;
  background: var(--primary); color: #fff; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
}

/* editor */
.ed-sub { display: block; margin: .4rem 0 .3rem; font-size: .8rem; color: var(--muted); }
.ed-extras { display: flex; flex-wrap: wrap; gap: .45rem; }
.ed-extra { position: relative; width: 66px; height: 66px; }
.ed-extra img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; background: var(--line); }
.ed-extra.sai img { opacity: .3; filter: grayscale(1); }
.ed-extra-x {
  position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line);
  border-radius: 50%; background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer;
}
.ed-extra-x::before { content: ""; position: absolute; inset: -8px; } /* alvo de toque maior */
.ed-extra-x svg { width: 14px; height: 14px; }
details.ed-admin > summary { cursor: pointer; list-style: revert; min-height: 32px; display: list-item; }
.ed-admin-corpo { display: flex; flex-direction: column; gap: .8rem; padding-top: .6rem; }
.ed-apagar { display: flex; justify-content: center; padding-top: .3rem; border-top: 1px solid var(--line); }
.ed-apagar .link-acao { min-height: 44px; font-size: .86rem; }

/* cartão de primeira vez (Coleção e Feed vazios) */
.vazio-li { list-style: none; }
.vazio-card {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center;
  padding: 1.4rem 1rem; background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius);
}
.vazio-card strong { font-size: 1rem; }
.vazio-card span { font-size: .88rem; color: var(--muted); }
.vazio-card .btn { margin-top: .3rem; min-height: 44px; }
.vazio-ico { width: 44px; height: 44px; border-radius: 14px; background: var(--primary); color: #fff !important; display: grid; place-items: center; }
.vazio-ico svg { width: 22px; height: 22px; }
.lista-achados li.vazio-li { display: block; padding: 0; border: 0; background: none; }
/* o toast centralizado com left:50% encolhia até metade da tela: largura pelo conteúdo */
.toast { width: max-content; max-width: min(calc(100vw - 32px), 440px); line-height: 1.35; }
.toast-acao { border-radius: 16px; }
.toast > span { min-width: 0; }
/* dois botões (dar nome + ver no feed): texto em cima, botões embaixo */
.toast-varias { flex-wrap: wrap; justify-content: flex-end; row-gap: .55rem; padding: .7rem .7rem .7rem 1rem; }
.toast-varias > span { flex: 1 1 calc(100% - 2rem); }
.peca-tags:empty, .peca-meta:empty { display: none; }
/* celular: Compartilhar e Editar viram círculos (rótulo no aria-label), a rota fica larga */
@media (max-width: 440px) {
  .peca-acoes { flex-wrap: nowrap; }
  .peca-acoes .btn-ghost { width: 44px; height: 44px; padding: 0; border-radius: 50%; flex: none; }
  .peca-acoes .btn-ghost span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .peca-acoes .btn-ghost svg.ic { width: 20px; height: 20px; }
  .peca-acoes .ico-btn { margin-left: 0; }
}
.f-chip[disabled] { opacity: .6; cursor: default; }

/* ---------- Fase I: convites (só ArtDots) ---------- */
/* portão: tela cheia, nada do app por baixo */
.modal-convite { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
.modal-convite::backdrop { background: var(--paper); }
.conv-corpo { max-width: 26rem; margin: 0 auto; padding: max(2.2rem, env(safe-area-inset-top)) 16px max(1.5rem, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: .9rem; }
.modal-convite form { padding: 0; }
.conv-marca { display: block; width: 2.9rem; height: 2.9rem; }
.conv-marca .marca { width: 100%; height: 100%; }
.modal-convite h2 { font-size: 1.45rem; line-height: 1.2; text-wrap: balance; }
.modal-convite .modal-sub { margin: -.3rem 0 0; font-size: .95rem; }
.conv-pedir { border-top: 1px solid var(--line); padding-top: 1.1rem !important; margin-top: .4rem; }
.conv-pedir h3 { margin: 0; font-size: 1rem; }
.conv-privado { margin: -.2rem 0 0; font-size: .78rem; color: var(--muted); line-height: 1.4; }
.conv-ok { margin: 0; font-size: .88rem; background: var(--fill); border-radius: 10px; padding: .6rem .8rem; line-height: 1.4; }
.conv-sair { align-self: flex-start; min-height: 44px; font-size: .9rem; }
#conv-codigo, #onb-codigo { letter-spacing: .08em; }
/* onboarding */
.onb-convite { display: flex; flex-direction: column; gap: .5rem; }
.onb-convite:empty { display: none; }
.onb-convidado { margin: 0; padding: .55rem .8rem; background: var(--fill); border-radius: 10px; font-size: .92rem; }
.onb-convite .link-acao { align-self: flex-start; min-height: 40px; font-size: .88rem; }
/* perfil: convites */
.tp-convites { display: flex; flex-direction: column; gap: .55rem; padding: .9rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 1rem; }
.tp-convites h3 { margin: 0; font-size: 1rem; }
.tp-convites-resumo { margin: 0; font-size: .92rem; font-weight: 600; color: var(--primary-ink); }
.tp-convites .btn { align-self: flex-start; }
.tp-trouxe-h { margin: .4rem 0 0; font-size: .85rem; color: var(--muted); font-weight: 600; }
.tp-conv-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.tp-conv-lista:empty { display: none; }
.tp-conv-item { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 10px; }
.tp-conv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.tp-conv-txt small { color: var(--muted); font-size: .78rem; }
.tp-conv-link { font-size: .85rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.tp-conv-ini { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-weight: 800; font-size: .95rem; }

/* foto de achado removida pela moderação (fotoAchado em app.js) */
.foto-removida-tag { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); padding: .3rem .7rem; border-radius: 999px; background: rgba(255,255,255,.85); color: var(--muted); font-size: .8rem; font-weight: 600; pointer-events: none; }
.foto-removida-nota { text-align: center; color: var(--muted); font-style: normal; }

/* visitante sem conta (Fase P): convite para entrar no lugar de quem achou */
.cacadores-entrar { min-height: 44px; font-size: .9rem; text-align: left; }
.feed-entrar { margin-top: .5rem; }

/* Fase G: galeria na ficha ("Exposta em X"), no editor e no registro */
.peca-exposta .link-autor { text-decoration: none; }
.peca-exposta-nota { display: block; font-size: .78rem; color: var(--muted); margin-top: .15rem; }
.ed-gal-nova { display: flex; flex-direction: column; gap: .6rem; padding: .7rem; border: 1px dashed var(--line); border-radius: 10px; }
#btn-ed-gal-nova { align-self: flex-start; }
.reg-galeria summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--primary-ink); }
.reg-galeria[open] summary { margin-bottom: .5rem; }

/* ---------- Fase D: Descobrir (busca + Obras | Galerias | Artistas) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.busca { position: relative; display: flex; align-items: center; }
.busca-ic { position: absolute; left: .8rem; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.busca input {
  flex: 1; min-width: 0; min-height: 46px; padding: .6rem 2.8rem .6rem 2.5rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink);
  font: inherit; font-size: 1rem; /* 16px: o iOS não dá zoom no foco */
  -webkit-appearance: none; appearance: none;
}
.busca input:focus { outline: 2px solid var(--primary); border-color: transparent; }
.busca input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.busca-x {
  position: absolute; right: .3rem; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer;
}
.busca-x svg { width: 18px; height: 18px; }
.busca-x:hover { background: var(--hover); color: var(--ink); }
.descobrir-colecoes { margin-top: -.2rem; }
.descobrir-corpo { display: flex; flex-direction: column; gap: 1rem; }
.descobrir-corpo:empty { display: none; }
.descobrir-nada { margin: .4rem 0; color: var(--muted); font-size: .95rem; }
/* grupos da busca */
.dg { display: flex; flex-direction: column; gap: .45rem; }
.dg h3 { margin: 0; font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.dg-todos { align-self: flex-start; min-height: 36px; font-size: .86rem; }
/* linhas: galeria, artista, obra, cidade */
.dl-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.dl-item { display: flex; align-items: center; gap: .3rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.dl-principal {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; border-radius: var(--radius);
}
@media (hover: hover) { .dl-principal:hover { background: var(--hover); } }
.dl-capa { width: 44px; height: 44px; flex: none; border-radius: 8px; object-fit: cover; background: var(--line); }
.dl-ini, .dl-num { display: grid; place-items: center; background: var(--soft); color: var(--primary-ink); font-weight: 800; font-size: 1.15rem; }
.dl-num { font-size: .82rem; letter-spacing: .02em; background: var(--fill); color: var(--ink); }
.dl-ic svg.ic { width: 20px; height: 20px; }
.dl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.dl-titulo { font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; }
.dl-titulo .selo-validada { color: var(--primary-ink); border-color: var(--primary); }
.dl-meta { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.dl-mapa { flex: none; min-height: 44px; padding: 0 .8rem; font-size: .8rem; white-space: nowrap; }
/* cartão de galeria (segmento Galerias): capa maior. Fase V troca a inicial pela capa */
.dl-card .dl-capa { width: 64px; height: 64px; border-radius: 10px; font-size: 1.6rem; }
.dl-card .dl-titulo { font-size: 1rem; }
.dl-adicionar { display: flex; flex-direction: column; gap: .25rem; padding: .8rem .9rem; border: 1px dashed var(--line); border-radius: var(--radius); }
.dl-adicionar .link-acao { align-self: flex-start; min-height: 36px; font-size: .92rem; }
.dl-adicionar span { font-size: .82rem; color: var(--muted); }
@media (max-width: 440px) {
  .dl-item { flex-wrap: wrap; gap: 0; }
  .dl-principal { flex-basis: 100%; }
  .dl-mapa { margin: -.4rem 0 .2rem calc(.6rem + 44px + .7rem); min-height: 36px; padding: 0; }
  .dl-card .dl-mapa { margin-left: calc(.6rem + 64px + .7rem); }
}
/* acervo do visitante: o ladrilho neutro leva o número (nenhuma foto de ninguém) */
.tessela-num {
  position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
  padding: .05rem .35rem; border-radius: 999px; background: rgba(255, 255, 255, .85); color: #2c2c2c;
  font-size: .68rem; font-weight: 700; pointer-events: none; white-space: nowrap;
}
/* painel de filtros: o chip que leva à busca */
.f-chip.f-chip-busca { border-style: dashed; color: var(--primary-ink); }
/* Perfil: o tile de achados abre "Meus achados" */
.tp-tile-btn { font: inherit; color: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) { .tp-tile-btn:hover { background: var(--hover); } }
.tp-tile-btn[aria-expanded="true"] { border-color: var(--primary); }
.tp-meus { display: flex; flex-direction: column; gap: .55rem; scroll-margin-top: 4.5rem; }
.tp-meus h3 { margin: 0; font-size: 1rem; }

/* ---------- Fase V: galerias em evidência ---------- */
/* pino da galeria: quadrado com o círculo e o ponto do ArtDots; Featured cheio */
.pin-galeria { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28)); }
.pin-galeria .caixa { fill: #fff; stroke: var(--primary); stroke-width: 2.4; }
/* round 12 (D4): dentro do quadrado, o ponto azul cheio; Featured: quadrado
   azul com o ponto branco */
.pin-galeria .miolo { fill: var(--primary); }
.pin-galeria.destaque .caixa { fill: var(--primary); stroke: var(--primary-dark); }
.pin-galeria.destaque .miolo { fill: #fff; }
/* rótulo de patrocínio (CAP/CONAR): sempre visível onde a galeria aparece em destaque */
.selo-destaque {
  display: inline-flex; align-items: center; margin-left: .4rem; padding: .08rem .5rem;
  border-radius: 999px; background: var(--primary); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; vertical-align: .12em; white-space: nowrap;
}
.gal-popup .leaflet-popup-content { margin: .75rem .85rem; }
.gal-pop { display: flex; flex-direction: column; gap: .3rem; font: inherit; min-width: 180px; }
.gal-pop-nome { font-size: 1rem; overflow-wrap: anywhere; }
.gal-pop .selo-destaque { margin-left: 0; align-self: flex-start; }
.gal-pop-meta { color: var(--muted); font-size: .82rem; }
.gal-pop-acoes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.gal-pop-acoes .btn { min-height: 36px; }
.gal-pop-acoes a.btn-ghost { color: var(--primary); }
/* o popup do Leaflet é branco nos dois temas: o botão principal fica em tinta */
.leaflet-popup-content .btn-primary { background: #151515; color: #fff; }
.leaflet-popup-content .btn-primary:hover { background: #3a3a3a; }
.gal-pop a.gal-pop-todas { align-self: flex-start; margin-top: .15rem; font-size: .82rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.dl-capa-gal { object-fit: cover; }
/* Fase E (040): What's on no cartão de galeria, nas linhas do Descobrir e na ficha */
.dl-prog { color: var(--primary-ink); font-weight: 600; }
.peca-cartaz .link-autor { text-decoration: none; }
/* cabeçalho do painel de filtros com o interruptor da camada de galerias */
.filtro-cab { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding-right: 2.4rem; }
.filtro-cab h2 { margin: 0; }
.f-camada { position: relative; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-size: .88rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.f-camada input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.f-camada-trilho { position: relative; width: 36px; height: 22px; border-radius: 999px; background: var(--line); transition: background .15s; flex: none; }
.f-camada-trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.f-camada input:checked + .f-camada-trilho { background: var(--primary); }
.f-camada input:checked + .f-camada-trilho::after { transform: translateX(14px); }
.f-camada input:focus-visible + .f-camada-trilho { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Conexões (Fase N) ---------- */
/* marca de conectado: o ponto do ArtDots, em azul (round 12) */
.marca-conexao {
  display: inline-flex; flex: none; width: 1em; height: 1em; margin-left: .3em; vertical-align: -.15em;
  color: var(--primary-ink);
}
.marca-conexao .marca { width: 100%; height: 100%; vertical-align: 0; }
.btn .marca-conexao { margin: 0 .35em 0 0; }
/* selo de pedidos no tile do Perfil (o mesmo do botão Filtros) */
.tp-tiles-2x2 { grid-template-columns: 1fr 1fr; }
.tp-tile-btn { position: relative; }
.tile-badge { position: absolute; top: 6px; right: 6px; background: var(--primary); color: #fff; border-radius: 999px; font-size: 11px; min-width: 18px; height: 18px; line-height: 18px; text-align: center; padding: 0 4px; font-weight: 700; }
.seg-badge { display: inline-block; margin-left: .3rem; background: var(--primary); color: #fff; border-radius: 999px; font-size: 11px; min-width: 18px; height: 18px; line-height: 18px; text-align: center; padding: 0 4px; font-weight: 700; vertical-align: 1px; }
.seg-badge.hidden { display: none; }
/* tela de conexões */
.cx-cab { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.cx-voltar { min-height: 36px; font-size: .92rem; }
.cx-vazio { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: .4rem 0; }
.cx-vazio .btn { min-height: 40px; }
#cx-seg .seg-btn { flex: 1 1 auto; }
.pessoa-av { border-radius: 50%; object-fit: cover; }
.pessoa-acoes { display: flex; align-items: center; gap: .35rem; padding-right: .5rem; flex: none; }
.pessoa-acoes .btn { min-height: 38px; }
.pessoa-mais { width: 40px; height: 40px; }
.dl-titulo .marca-conexao { margin-left: .3em; }
.pessoas-entrar { align-items: flex-start; }
.pessoas-dica { margin: 0; }
/* ficha de membro */
.mb-acoes { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.mb-acoes .btn { min-height: 40px; }
.mb-sec { display: flex; flex-direction: column; gap: .45rem; }
.mb-sec h3 { margin: 0; font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.mb-trava { padding: .6rem .8rem; border: 1px dashed var(--line); border-radius: var(--radius); }
#mb-descobertas .tag-chip { cursor: pointer; }
/* perfil: interruptor "deixar que me achem" na lista */
.tp-switch { position: relative; cursor: pointer; }
.tp-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tp-switch input:checked + .f-camada-trilho { background: var(--primary); }
.tp-switch input:checked + .f-camada-trilho::after { transform: translateX(14px); }
.tp-switch input:focus-visible + .f-camada-trilho { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Fase X: rótulo com uma linha de apoio (o switch de push) */
.tp-rotulo { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.tp-sub { font-size: .8rem; line-height: 1.3; color: var(--muted); }
.tp-conv-abre { cursor: pointer; }
@media (hover: hover) { .tp-conv-abre:hover { background: var(--hover); } }
@media (max-width: 440px) {
  /* só o "...": fica na mesma linha; Aceitar/Recusar descem para baixo do nome */
  .pessoa-item.pessoa-compacta { flex-wrap: nowrap; }
  .pessoa-item.pessoa-compacta .dl-principal { flex-basis: auto; }
  .pessoa-item:not(.pessoa-compacta) .pessoa-acoes { margin: -.3rem 0 .5rem calc(.6rem + 44px + .7rem); padding: 0; }
}
/* tela de membro (Fase M): três tiles numa linha (achados, descobertas, conexões) */
.tp-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tp-tiles-3 .tp-tile { padding: .7rem .75rem; min-width: 0; }
.tp-tiles-3 .tp-tile span { overflow-wrap: anywhere; }
#mb-apelido .marca-conexao { margin-left: .3em; }
/* a faixa de achados recentes rola de lado dentro da tela (a regra geral
   .tela .acervo-grade solta o overflow, e a tela inteira rolaria de lado) */
.tela .acervo-grade.galeria-grade { overflow-x: auto; overflow-y: hidden; }
.fcard-quem .marca-conexao { margin-left: -.25rem; }

/* ---------- Fase S (brief round 3, seção 8) ---------- */
/* D14: os dois grupos de sugestões também na tela de conexões vazia */
.cx-sugestoes { display: flex; flex-direction: column; gap: 1rem; padding-top: .4rem; }
/* D15: a barra fina do próximo marco no tile Convites (sem barra para o admin) */
.tp-tile .tp-marco { display: flex; flex-direction: column; gap: .3rem; margin-top: .35rem; }
.tp-tile .tp-marco.hidden { display: none; }
.tp-marco-trilho { display: block; height: 4px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.tp-marco-barra { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--primary); transition: width .3s ease; }
.tp-marco-txt { font-size: .74rem; line-height: 1.25; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .tp-marco-barra { transition: none; } }
/* D16: a tela do artista */
#ar-nome .selo-validada { margin-left: .4rem; }
.ar-bio { margin: 0; line-height: 1.55; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.ar-links { display: flex; flex-wrap: wrap; gap: .45rem; }
.ar-links .insta-chip, .ar-link { display: inline-flex; align-items: center; gap: .3rem; margin: 0; min-height: 36px; padding: .3rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--primary-ink); font-size: .88rem; font-weight: 600; text-decoration: none; vertical-align: 0; overflow-wrap: anywhere; }
.ar-link.ar-endereco { color: var(--ink); font-weight: 500; }
.ar-link svg.ic { width: 1em; height: 1em; flex: none; }
/* Round 11, Fase X: "Show on map" e "Walk it" logo abaixo do cabeçalho */
.ar-mapa-acoes .btn svg { width: 18px; height: 18px; flex: none; }
.tela .acervo-grade.ar-grade { max-height: none; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

/* ---------- Fase N (round 4, D6): dentro do app iOS (html.ah-app) ----------
   Com viewport-fit=cover a página vai até debaixo do relógio e da ilha
   dinâmica, e o topo do app é vidro (translúcido): o que rolava por baixo
   aparecia atrás do relógio. Uma faixa branca fixa da altura do recorte fica
   por cima de tudo que não é camada de topo (topo 1000, telas 940); a barra de
   status é de texto escuro (SystemBars LIGHT em app/capacitor.config.json),
   por isso branca também no tema escuro. O topo e os cabeçalhos das páginas
   já descem pelo recorte (padding com env(safe-area-inset-top)). Fora do app
   a regra não existe, e na web env() é 0 de qualquer jeito. */
html.ah-app body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top);
  background: #fff;
  z-index: 1100;
  pointer-events: none;
}


/* ===== Fase B do round 6 (D1): o sino do topo e a tela de notificações =====
   O sino é um .btn-icone como o dos Filtros, com o mesmo .filtros-badge. As
   linhas são .dl-item (as mesmas das listas de Descobrir e Conexões); a não
   lida tem a frase em negrito e um ponto azul à direita. */
.nt-cab { display: flex; align-items: center; justify-content: space-between; gap: .4rem .8rem; flex-wrap: wrap; }
.nt-lertodas { min-height: 36px; font-size: .9rem; }
.nt-lertodas:disabled { color: var(--muted); cursor: default; }
.nt-frase { font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.nt-nova .nt-frase { font-weight: 700; }
.nt-quando { font-size: .8rem; }
.nt-ponto { flex: none; width: 10px; height: 10px; margin-right: .2rem; border-radius: 50%; background: var(--primary); }
.nt-ic svg.ic { width: 22px; height: 22px; }
.dl-capa.nt-ic { border-radius: 50%; }
.nt-vazio { padding: 1.2rem 0; text-align: center; }

/* ===== Fase C do round 7 (D3): a ficha da peça com frente e verso =====
   Duas <section data-face> dentro de .peca-card; a escondida leva [hidden]
   (sai do layout, então a altura do diálogo segue a face à vista). A que
   entra desliza 12px e acende; com prefers-reduced-motion a troca é seca. */
.peca-face { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.peca-face[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .peca-card[data-anim="verso"] [data-face="verso"] { animation: pecaFaceDir .2s ease-out both; }
  .peca-card[data-anim="frente"] [data-face="frente"] { animation: pecaFaceEsq .2s ease-out both; }
  @keyframes pecaFaceDir { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
  @keyframes pecaFaceEsq { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
}
/* frente: uma linha de artista, uma de lugar; nada quebra em duas */
.peca-linha { margin: -.45rem 0 0; font-size: .9rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peca-linha .link-autor, .peca-linha strong { font-weight: 700; }
.peca-lugar { color: var(--muted); }
.peca-lugar svg.ic { vertical-align: -.2em; color: var(--muted); }
.tag-chip.tag-mais { cursor: pointer; font-weight: 700; color: var(--primary-ink); }
.tag-chip.tag-mais:hover { border-color: var(--primary); }
/* chip de situação: pílula com a pilha de até 3 rostos */
.peca-status {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; max-width: 100%;
  min-height: 36px; padding: .25rem .8rem .25rem .3rem; margin: 0;
  border: 1px solid var(--line); border-radius: 999px; background: var(--fill); color: var(--ink);
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.peca-status:not(:has(.chip-rostos)) { padding-left: .8rem; }
.peca-status:hover { border-color: var(--primary); }
.peca-status.achei { color: var(--ok); border-color: var(--ok); }
.peca-status .chip-txt { overflow: hidden; text-overflow: ellipsis; }
.chip-rostos { display: inline-flex; flex: none; }
.chip-rosto {
  width: 26px; height: 26px; margin-left: -8px; border: 2px solid var(--fill); border-radius: 50%;
  background: var(--primary); color: #fff; font-size: .7rem; font-weight: 800; font-style: normal;
  display: grid; place-items: center; overflow: hidden; flex: none;
}
.chip-rosto:first-child { margin-left: 0; }
.chip-rosto::after { content: attr(data-ini); }
.chip-rosto.com-foto::after { content: none; }
.peca-detalhe .chip-rosto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; max-height: none; }
/* "Details ›": linha de ícone do Run&Co (título forte, sub apagado, seta) */
.peca-det {
  display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 56px; padding: .55rem .2rem .55rem 0;
  border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.peca-det-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; }
.peca-det-txt strong { font-size: .95rem; }
.peca-det-sub { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peca-det-sub:empty { display: none; }
.peca-det-seta { width: 20px; height: 20px; flex: none; color: var(--muted); }
.peca-det:hover .peca-det-seta { color: var(--primary-ink); }
.peca-det + .peca-acoes { border-top: 0; padding-top: 0; }
/* verso: cabeçalho "‹ Back · Details" livre do X do canto */
.peca-verso-topo { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding-right: 48px; margin: -.3rem 0 0; }
.peca-verso-h { margin: 0; font-size: 1.05rem; font-weight: 800; }
.peca-verso-topo .cx-voltar { padding-left: 0; }
.peca-fatos-linha { margin: 0; font-size: .82rem; color: var(--muted); }
[data-face="verso"] .foto-legenda { margin: 0; }
[data-face="verso"] .peca-fatos, [data-face="verso"] .peca-endereco, [data-face="verso"] .peca-meta { margin: 0; }
.peca-situacao { margin: .2rem 0 -.3rem; font-size: .88rem; font-weight: 600; color: var(--ink); }
.peca-situacao.achei { color: var(--ok); }
.peca-situacao:empty { display: none; }

/* ===== Round 7, Fase D (D4): as três peças do Run&Co, com os tokens do ArtDots =====
   Padrão das telas de lista (docs/MODULOS.md). Porta a anatomia, não as cores:
   superfície branca (--card) com anel de 1px (--line), ícone azul, texto tinta.
     .ah-sup     uma superfície por assunto; raio 14, anel por box-shadow
     .ah-linha   a linha dentro dela: [ícone 22] título forte / sub apagado [›]
                 serve como <a> e como <button>; o chevron nasce sozinho no <a>
                 e no <button class="leva">; linhas vizinhas levam um fio de 1px
     .ah-nums    faixa de números: número grande, rótulo pequeno, fios verticais */
.ah-sup {
  background: var(--card); border-radius: 14px; box-shadow: 0 0 0 1px var(--line);
  overflow: hidden; margin-top: 12px;
}
.tela-corpo > .ah-sup { margin-top: 0; }   /* a .tela-corpo já dá o espaço (gap) */
.ah-linha {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin: 0;
  padding: 12px 16px; border: 0; border-radius: 0; background: none; color: var(--ink);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.ah-linha + .ah-linha { box-shadow: inset 0 1px 0 var(--line); }
a.ah-linha:active, button.ah-linha:active { background: var(--hover); }
@media (hover: hover) { a.ah-linha:hover, button.ah-linha:hover { background: var(--hover); } }
.ah-linha:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ah-linha > svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--primary-ink); }
.ah-linha-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ah-linha-corpo > b { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.ah-linha-corpo > span { margin-top: 2px; font-size: .82rem; line-height: 1.4; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-linha-corpo > span:empty::before { content: "\00a0"; }   /* a linha não pula quando o número chega */
a.ah-linha::after, button.ah-linha.leva::after {
  content: ""; flex-shrink: 0; width: 7px; height: 7px; margin: 0 2px 0 4px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg);
}
@media (hover: hover) { a.ah-linha:hover::after, button.ah-linha.leva:hover::after { border-color: var(--primary); } }
.ah-nums { display: flex; align-items: stretch; padding: 14px 4px; }
.ah-num { flex: 1; min-width: 0; padding: 0 12px; display: flex; flex-direction: column; justify-content: flex-start; }
.ah-num + .ah-num { box-shadow: inset 1px 0 0 var(--line); }
.ah-num b { font-size: 1.6rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.ah-num span { margin-top: 6px; font-size: .78rem; line-height: 1.3; color: var(--muted); text-wrap: balance; }
.ah-sup > .ah-nums + * { box-shadow: inset 0 1px 0 var(--line); }
/* cabeçalho de uma lista aberta no lugar: "‹ Discover" e o título */
.ah-cab { display: flex; align-items: center; gap: .6rem; min-height: 44px; margin: -.3rem 0 -.2rem; }
.ah-cab .cx-voltar { padding-left: 0; }
.ah-cab-h { margin: 0; font-size: 1.05rem; font-weight: 800; }
.ah-cab-h:focus { outline: none; }
/* round 8, Fase G: "See the map ›" no fim do cabeçalho de Descobrir > Galerias */
.ah-cab-fim { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; font-size: .9rem; text-decoration: none; }

/* Descobrir no desenho novo: a busca dentro de uma superfície, com a lupa no campo */
.ah-sup-busca .busca-ic { left: 16px; width: 20px; height: 20px; }
.ah-sup-busca .busca input { min-height: 52px; padding-left: 46px; border: 0; border-radius: 0; background: transparent; }
.ah-sup-busca .busca input:focus { outline: none; }
/* sem texto o X não aparece: o placeholder usa a largura toda (e um ponto a menos) */
.ah-sup-busca .busca input:placeholder-shown { padding-right: 12px; }
.ah-sup-busca .busca input::placeholder { font-size: .94rem; }
.ah-sup-busca:focus-within { box-shadow: 0 0 0 2px var(--primary); }
/* listas do Descobrir: as linhas .dl-item viram .ah-linha numa .ah-sup */
.dl-lista.ah-lista { display: block; }
.ah-lista > .dl-item { border: 0; border-radius: 0; background: none; }
.ah-lista > .dl-item + .dl-item { box-shadow: inset 0 1px 0 var(--line); }
.ah-lista .dl-principal.ah-linha { gap: 12px; padding: 12px 16px; border-radius: 0; }
.ah-lista .dl-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-lista .dl-card .dl-capa { width: 56px; height: 56px; font-size: 1.4rem; }
.ah-lista .dl-mapa { padding: 0 16px; }
/* Round 11, Fase X: Descobrir > Artistas, o ícone do mapa no fim da linha
   (antes do chevron do toque principal); some o link de texto "Show on map" */
.dl-item.dl-com-ic { flex-wrap: nowrap; }
.dl-item.dl-com-ic > .dl-principal { flex-basis: auto; }
.ah-lista .dl-com-ic .dl-principal.ah-linha { padding-right: 4px; }
.dl-mapa-ic {
  flex: none; width: 44px; height: 44px; margin-right: 8px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: none; color: var(--primary-ink); cursor: pointer;
}
.dl-mapa-ic svg { width: 20px; height: 20px; }
.dl-mapa-ic:active { background: var(--hover); }
@media (hover: hover) { .dl-mapa-ic:hover { background: var(--hover); } }
.dl-mapa-ic:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ah-lista .pessoa-acoes { padding-right: 16px; }
.ah-lista .pessoa-item .dl-principal { padding-right: 8px; }
.ah-sup-chips { padding: 12px 16px; }
:is(#tela-descobrir, #tela-conexoes) .dg { gap: 0; }
:is(#tela-descobrir, #tela-conexoes) .dg > h3 { margin: 0; padding: 0 4px; font-size: .75rem; letter-spacing: .06em; color: var(--ink); }
:is(#tela-descobrir, #tela-conexoes) .dg > .ah-sup { margin-top: 8px; }
:is(#tela-descobrir, #tela-conexoes) .dg > .modal-sub { margin-top: 6px; padding: 0 4px; }
#tela-descobrir .dg-todos { margin-top: 4px; }
#descobrir-pecas .acervo-grade { border-radius: 0; }
@media (max-width: 440px) {
  .ah-lista .dl-mapa { margin: -.5rem 0 .3rem calc(16px + 44px + 12px); padding: 0; }
  .ah-lista .dl-card .dl-mapa { margin-left: calc(16px + 56px + 12px); }
  /* a ação de pessoa (Connect) fica no fim da linha, como no Run&Co */
  .ah-lista .pessoa-item { flex-wrap: nowrap; }
  .ah-lista .pessoa-item .dl-principal { flex-basis: auto; }
  .ah-lista .pessoa-item:not(.pessoa-compacta) .pessoa-acoes { margin: 0; padding: 0 12px 0 0; }
}

/* ===== Round 8, Fase L (D1): Ajustes, Conexões e Notificações na anatomia da linha =====
   Regra (docs/MODULOS.md): uma linha de ajuste ou de lista é .ah-linha; nada de
   estilo de linha novo. Aqui só o que falta à anatomia para essas telas:
     .ah-linha-fim   o fim da linha: interruptor ou select (Ajustes)
     label.ah-linha  a linha inteira liga o interruptor ou abre o select
   Conexões usa listaDescobrir(..., { sup: true }) como o Descobrir; Notificações
   é uma .ah-sup.ah-lista com a frase, o tempo no sub e o ponto no fim. */
label.ah-linha { cursor: pointer; }
div.ah-linha { cursor: default; }   /* a linha que não abre nada (Bloqueados) */
label.ah-linha:active { background: var(--hover); }
@media (hover: hover) { label.ah-linha:hover { background: var(--hover); } }
.ah-linha-fim { flex: none; display: flex; align-items: center; gap: 8px; max-width: 48%; margin-left: auto; }
.ah-linha-fim select {
  min-width: 0; max-width: 100%; min-height: 36px; padding: .35rem .5rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
  font: inherit; font-size: .9rem; text-overflow: ellipsis;
}
.ah-linha-corpo > b { overflow-wrap: anywhere; }
.ah-linha-corpo > span.tp-sub { white-space: normal; }   /* o sub do push é uma frase: quebra, não corta */
#cx-corpo > .ah-sup { margin-top: 0; }
.nt-lista.ah-sup:empty { display: none; }   /* lendo ou vazia: sem a superfície oca */
.ah-lista .nt-ponto { margin: 0 0 0 4px; }

/* ===== Round 9, Fase K (D1): a tela do ranking (js/ranking.js) =====
   A lista é a anatomia de sempre (.ah-sup.ah-lista com .ah-linha); aqui só o
   que é do ranking: o selo da posição no lugar do ícone (1, 2 e 3 em azul, o
   resto apagado), a minha linha destacada e a minha linha fixa no pé quando
   estou fora das 50. */
.rk-pos {
  flex: none; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: 999px; background: var(--fill); color: var(--muted);
  font-size: .85rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.rk-pos.rk-top { background: var(--primary); color: #fff; }
.rk-lista.ah-sup:empty { display: none; }
.ah-lista > .rk-item.rk-sou-eu { background: var(--soft); }
.rk-sou-eu .rk-nome { color: var(--primary-ink); }
.rk-tu { margin-left: .4em; font-size: .78rem; font-weight: 600; color: var(--muted); }
.rk-vazio { padding: 1.2rem 0; text-align: center; }
.rk-eu {
  position: sticky; bottom: calc(var(--tabbar-h) + 8px); z-index: 1; margin-top: 0;
  background: var(--soft); box-shadow: 0 0 0 1px var(--primary), 0 6px 18px rgba(0, 0, 0, .14);
}
.rk-eu .ah-linha { min-height: 56px; cursor: default; }

/* ===== Round 9, Fase R (D3): rotas de membro (js/rotas.js) =====
   O tile Routes é o quinto do Perfil e ocupa a linha inteira (ícone, número,
   rótulo, chevron). A tela usa a anatomia de sempre: a lista é .ah-sup com
   button.ah-linha.leva; o detalhe é uma .ah-sup.ah-lista em que cada peça é
   uma linha com o número da ordem no lugar do ícone e, no fim, subir,
   descer e tirar (botões de 40 px, cinza; nada vermelho). */
.tp-tile.tp-tile-rotas { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: .75rem; }
.tp-tile-rotas .tp-rotas-ic { flex: none; width: 24px; height: 24px; color: var(--primary-ink); }
.tp-rotas-txt { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: .45rem; }
.tp-tile-rotas::after {
  content: ""; flex-shrink: 0; width: 7px; height: 7px; margin: 0 4px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg);
}
.rt-lista.ah-sup:empty { display: none; }
.rt-vazio { padding: .6rem 0; }
.rt-nova { align-self: flex-start; min-height: 44px; margin-top: 4px; }
.rt-limite { margin-top: 4px !important; }
#rt-h:focus { outline: none; }
.rt-d-desc { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.rt-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.rt-acoes .btn { min-height: 44px; }
.rt-pecas { list-style: none; margin: 0; padding: 0; }
.rt-peca { display: flex; align-items: center; min-width: 0; }
.ah-lista > .rt-peca + .rt-peca { box-shadow: inset 0 1px 0 var(--line); }
.rt-peca > .rt-abrir { flex: 1; min-width: 0; padding-right: 4px; }
.rt-pos {
  flex: none; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: 999px; background: var(--primary); color: #fff;
  font-size: .85rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.rt-ctrl { flex: none; display: flex; align-items: center; gap: 2px; padding-right: 8px; }
.rt-bt {
  display: grid; place-items: center; width: 40px; height: 44px; padding: 0;
  border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer;
}
.rt-bt svg { width: 20px; height: 20px; }
.rt-bt:disabled { opacity: .3; cursor: default; }
@media (hover: hover) { .rt-bt:not(:disabled):hover { background: var(--hover); color: var(--ink); } }
.rt-bt:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
@media (max-width: 380px) { .rt-bt { width: 34px; } .rt-ctrl { padding-right: 4px; } }
/* o chip da rota na ficha: o traço da rota antes do nome */
.tag-chip.tag-rota { display: inline-flex; align-items: center; gap: .3rem; }
.tag-rota-ic { width: 13px; height: 13px; color: var(--primary-ink); flex: none; }
/* folha "Add to a route" */
.ra-item .folha-ic svg, .ra-nova-linha .folha-ic svg { width: 22px; height: 22px; }
.ra-item .folha-ic { color: var(--primary-ink); }
.ra-txt { display: flex; flex-direction: column; min-width: 0; }
.ra-txt > span { overflow-wrap: anywhere; }
.modal form.ra-nova { display: flex; flex-direction: column; gap: .5rem; padding: 0; }   /* o form dentro da folha não leva o padding do .modal form */
.ra-nova.hidden { display: none; }
.ra-nova .btn { min-height: 44px; }

/* ===== Round 9, Fase O (D4): o onboarding na anatomia .ah-sup / .ah-linha =====
   Tela 1: o avatar no lugar do ícone de uma linha alta e o apelido no corpo; o
   convite numa superfície só quando aparece; o consentimento numa linha com a
   caixa no fim. Tela 2: as cidades numa superfície e a prévia da obra mais
   perto (#onb-perto). "Step 1 of 2" é uma linha pequena e apagada. */
.onb-passo { margin: 0; font-size: .78rem; font-weight: 600; color: var(--muted); }
#modal-onboarding .ah-sup { margin-top: 0; }
#modal-onboarding .ah-linha { cursor: default; }
#modal-onboarding label.ah-linha { cursor: pointer; }
.onb-eu { min-height: 104px; gap: 14px; }
.onb-eu .foto-bloco { flex: none; }
.onb-eu .onb-quadro { width: 76px; }
#modal-onboarding .onb-apelido, #modal-onboarding .onb-codigo-rotulo { gap: 6px; }
#modal-onboarding .ah-linha-corpo > b, #modal-onboarding .onb-codigo-rotulo > b { font-size: .85rem; font-weight: 700; color: var(--muted); }
#modal-onboarding .ah-linha-corpo input[type=text] { width: 100%; }
#modal-onboarding .onb-convidado .ah-linha-corpo > b { font-size: 1rem; color: var(--ink); }
.onb-codigo { align-items: flex-start; }
.onb-codigo > svg { margin-top: 26px; }
.onb-codigo .ah-linha-corpo { gap: 4px; }
.onb-codigo .onb-nota { margin: 0; white-space: normal; }
.onb-codigo .link-acao { align-self: flex-start; min-height: 36px; padding-left: 0; font-size: .88rem; }
/* o consentimento: a frase no corpo, a caixa no fim da linha */
#modal-onboarding label.onb-consent-linha { flex-direction: row; align-items: center; gap: 12px; font-size: .85rem; font-weight: 500; }
#modal-onboarding .ah-linha-corpo > .onb-consent-txt { margin: 0; font-size: .85rem; line-height: 1.4; color: var(--ink); white-space: normal; overflow: visible; }
.onb-consent-txt a { color: var(--primary-ink); }
.onb-consent-linha .ah-linha-fim input { width: 24px; height: 24px; margin: 0; accent-color: var(--primary); }
/* tela 2 */
.onb-cidades-sup { display: flex; flex-direction: column; gap: .6rem; }
.onb-cidades-sup .onb-nota { margin: 0; }
.onb-cidades-sup .onb-nota:empty { display: none; }
.onb-cidades-sup .onb-gps { margin-top: .1rem; }
#modal-onboarding .onb-perto .ah-linha-corpo > b { font-size: 1rem; color: var(--ink); }
#modal-onboarding .onb-perto .ah-linha-corpo > span { font-weight: 600; color: var(--primary-ink); }
#form-onb-cidade .modal-actions .btn { flex: 1; }
@media (min-width: 441px) { #form-onb-cidade .modal-actions .btn { flex: none; } }

/* ===== Round 10, Fase F (D1): a fila offline de achados (js/fila.js) =====
   A linha "N finds waiting" do Perfil é uma .ah-linha comum; a #tela-fila é
   uma .ah-sup de .ah-linha com a miniatura guardada no lugar do ícone, a peça,
   "data · estado", a marca "Old photo" e os botões. O motivo de uma recusa é a
   nota neutra (nunca vermelho). */
.fila-sub { margin: 0; }
.fila-lista { list-style: none; margin: 0; padding: 0; }
.fila-item { align-items: flex-start; cursor: default; }
.fila-foto { flex: none; width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--fill); }
.fila-item .ah-linha-corpo { gap: 2px; }
.fila-velha {
  align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 999px;
  background: var(--fill); color: var(--ink); font-style: normal; font-size: .75rem; font-weight: 600;
}
.fila-motivo { margin-top: 6px; }
.fila-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 8px; }
.fila-acoes .btn { min-height: 44px; }
.fila-enviando .fila-foto { opacity: .6; }

/* ===== Round 10, Fase A (D2): acessibilidade (docs/ACESSIBILIDADE.md) ===== */

/* 1. Alvo de toque de 44x44 sem mudar o desenho (o padrão do RaceLog+): o
   controle pequeno ganha um ::after invisível, centrado, de no mínimo 44x44.
   O position: relative vem num :where() (especificidade zero): quem já
   posiciona o controle (absolute, fixed, sticky) continua vencendo, e o
   ::after passa a medir a partir dele do mesmo jeito. Controle com
   overflow: hidden recorta o próprio ::after: esses crescem por padding
   (.cm-nome abaixo). Controle novo pequeno entra nesta lista. */
:where(.btn, .link-acao, .p-ic, .f-chip, a.tag-chip, button.tag-chip, .foto-trocar, .peca-status,
  .insta-chip, .cacador, .link-autor, .fcard-peca, .seg-btn, a.brand, .rt-bt, .slide-dot, .bk-visao,
  .bk-st-btn, .bk-voto, .gp-link, .ap-link, .ar-link, .pp-convite-entrar, .up-convite-entrar, .cacadores-entrar, .lp-idioma, .troca-idioma a,
  .nav-paginas a, .pp-fatos a, .gp-fatos a, .busca-x, .leaflet-marker-icon.leaflet-interactive) { position: relative; }
:where(.btn, .link-acao, .p-ic, .f-chip, a.tag-chip, button.tag-chip, .foto-trocar, .peca-status,
  .insta-chip, .cacador, .link-autor, .fcard-peca, .seg-btn, a.brand, .rt-bt, .slide-dot, .bk-visao,
  .bk-st-btn, .bk-voto, .gp-link, .ap-link, .ar-link, .pp-convite-entrar, .up-convite-entrar, .cacadores-entrar, .lp-idioma, .troca-idioma a,
  .nav-paginas a, .pp-fatos a, .gp-fatos a, .busca-x, .leaflet-marker-icon.leaflet-interactive)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
/* o nome de quem comentou tem reticências (overflow: hidden): cresce por
   padding e devolve pela margem, então o desenho da linha não muda */
.cm-nome { min-width: 44px; padding: 14px 0; margin: -14px 0; text-align: left; }
/* o avatar de quem achou recortava o ::after; a foto já é redonda sozinha */
.cacador { overflow: visible; }
/* campos: não há ::after em input e select, então eles têm 44 de altura */
.modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.modal select, .tela select, .tela input[type="text"], .tela input[type="search"] { min-height: 44px; }
.loc-outras summary, .reg-galeria summary { min-height: 44px; }
.loc-texto .link-acao { min-height: 44px; }
/* zoom do Leaflet: 44 de verdade (30 no toque era pouco), no app e nas páginas */
.leaflet-bar a, .leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }

/* placeholder em AA: o cinza padrão do navegador (darkgray) dava 2.3:1 no branco */
::placeholder { color: var(--muted); opacity: 1; }

/* 2. Pular para o conteúdo (páginas públicas): fora da tela até ganhar foco */
.pular {
  position: absolute; left: 8px; top: -60px; z-index: 3000;
  padding: .7rem 1rem; min-height: 44px; border-radius: 10px;
  background: var(--primary); color: #fff; font-weight: 700; text-decoration: none;
}
.pular:focus, .pular:focus-visible { top: 8px; outline: 2px solid var(--ink); outline-offset: 2px; }
main[tabindex="-1"]:focus { outline: none; }

/* 3. Menos movimento: toda animação e transição vira instantânea. O que é
   indicação de espera (o esqueleto do feed já para sozinho) fica parado, não
   some. Regras que já tinham a versão calma continuam valendo por cima. */
@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;
  }
}

/* ===== Round 10, Fase P (D3): a página pública do membro =====
   Ajustes: o sub com o endereço /u/<slug> e a nota ficam em linhas próprias
   (quebram, não cortam). Ranking: o "Share" no fim da linha de quem ligou a
   página; a linha não quebra no celular (o botão fica ao lado). */
.ah-linha-corpo > span.tp-sub.aj-pagina-url { color: var(--primary-ink); font-weight: 600; overflow-wrap: anywhere; }
.ah-lista > .rk-item { flex-wrap: nowrap; }
.ah-lista > .rk-item .dl-principal { flex-basis: auto; }
.rk-share { margin: 0 16px 0 4px; }

/* ===== Round 10, Fase B (D4): as conquistas =====
   O ícone mora num círculo: desbloqueado com o fundo --soft e o traço
   --primary-ink; travado só com o contorno (--line) e o traço --muted.
   Perfil: a fileira dos 8 (26 px) embaixo do "3 of 8" da linha Badges.
   Tela: uma linha por conquista (ícone 40), a frase quebra, o sub é a data
   (azul) ou o progresso (apagado). Tela de membro: só as desbloqueadas. */
.cq-ic {
  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
}
.cq-ic svg { width: 22px; height: 22px; }
.cq-ic-on { background: var(--soft); color: var(--primary-ink); }
.cq-ic-off { box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); }
.ah-linha-corpo > .cq-fila {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px;
  white-space: normal; overflow: visible; color: inherit; font-size: inherit;
}
.cq-fila .cq-ic { width: 26px; height: 26px; }
.cq-fila .cq-ic svg { width: 16px; height: 16px; }
.cq-resumo { margin: 0; }
.cq-lista { list-style: none; margin: 0; padding: 0; }
.cq-item { align-items: flex-start; cursor: default; }
.cq-item .ah-linha-corpo > .cq-desc { white-space: normal; overflow: visible; color: var(--ink); }
.cq-item .ah-linha-corpo > .cq-sub { color: var(--muted); }
.cq-on .ah-linha-corpo > .cq-sub { color: var(--primary-ink); font-weight: 600; }
.mb-conquistas { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; }
.mb-conquistas .cq-ic { width: 36px; height: 36px; }
.mb-conquistas .cq-ic svg { width: 20px; height: 20px; }

/* ===== Round 11, Fase C (D3): nomes por votos e o progresso da atribuição =====
   Frente da ficha: "Suggest a name" é uma .ah-linha.leva com o fio de cima e
   o respiro do "Details ›" logo abaixo (a ficha é plana, sem .ah-sup). A
   folha #modal-nomes: o campo com o botão ao lado e a lista .ah-sup.ah-lista
   de li.ah-linha; o "+1" é um botão de 44 px, contorno quando não apoiei e
   cheio (--primary) quando apoiei. Verso: a linha de progresso sob a
   sugestão pendente, apagada, com o "I agree" azul para quem achou. */
.ah-linha.peca-nomes {
  min-height: 56px; padding: .55rem .2rem .55rem 0; gap: .6rem;
  border-top: 1px solid var(--line); box-shadow: none;
}
.ah-linha.peca-nomes .ah-linha-corpo > b { font-size: .95rem; }
.peca-nomes + .peca-det { margin-top: -.5rem; }
.nm-form { display: flex; flex-direction: column; gap: .35rem; padding: 0; margin: 0; }
.modal form.nm-form { padding: 0; }
.nm-rotulo { font-size: .85rem; font-weight: 600; color: var(--ink); }
.nm-campo { display: flex; gap: .5rem; }
.nm-campo input { flex: 1; min-width: 0; min-height: 44px; }
.nm-campo .btn { flex: none; min-height: 44px; }
.nm-lista { list-style: none; margin: .2rem 0 0; padding: 0; }
.nm-lista:empty { display: none; }
.nm-item { cursor: default; min-height: 56px; }
.nm-ic { flex: none; display: flex; color: var(--primary-ink); }
.nm-ic svg { width: 22px; height: 22px; }
.nm-tua {
  display: inline-block; margin-left: .15rem; padding: 0 .45rem; border-radius: 999px;
  background: var(--soft); color: var(--primary-ink); font-size: .72rem; font-weight: 700; vertical-align: .1em;
}
.nm-mais {
  min-width: 52px; min-height: 44px; padding: 0 .8rem; border-radius: 999px;
  border: 1.5px solid var(--primary-ink); background: none; color: var(--primary-ink);
  font: inherit; font-size: .95rem; font-weight: 800; cursor: pointer;
}
.nm-mais.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.nm-mais:disabled { opacity: .6; cursor: default; }
.nm-mais:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nm-vazio { margin: 0; }
.peca-fatos .atr-progresso { margin-top: -.2rem; }
.atr-concordo { font-weight: 700; }