/* Página de ferramenta (shell/toolpage.js): herói, área de trabalho com cartões e barra
   lateral, processamento e resultado. Classes com prefixo tp- e card- são do shell;
   telas próprias (tools/*.css) devem usar o prefixo da ferramenta.
   Profundidade (docs/TEMA.md): área de trabalho no nível 0 (fundo), cartões de arquivo e
   resumos no 1, barra lateral no 2, camada "Solte os arquivos aqui" no 4; miniaturas, quadros
   e a trilha da barra de progresso são afundados. */

/* ---------- Herói ---------- */

.tp-hero { max-width: 900px; margin: 0 auto; padding: 72px 24px 80px; text-align: center; }
.tp-title { margin: 0 0 12px; font-size: clamp(28px, 4vw, 44px); line-height: 1.12; font-weight: 800; letter-spacing: -.03em; }
.tp-lead { margin: 0 auto 38px; max-width: 700px; font-size: clamp(16px, 1.7vw, 20px); color: var(--muted); }
.tp-pick { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tp-drop-hint { margin: 0; color: var(--muted); font-size: 15px; }
@media (hover: none) and (pointer: coarse) { .tp-drop-hint { display: none; } } /* no toque não há o que arrastar */
.tp-fine { display: inline-flex; gap: 8px; align-items: flex-start; max-width: 580px; margin: 26px auto 0; color: var(--muted); font-size: 13px; text-align: left; }
.tp-fine svg { font-size: 17px; color: var(--good); margin-top: 1px; }
.tp-note {
  display: flex; gap: 14px; align-items: flex-start; max-width: 580px; margin: 0 auto; padding: 20px 22px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--elev-1);
}
.tp-note > svg { font-size: 24px; color: var(--accent); margin-top: 2px; }
.tp-note p { margin: 0 0 10px; color: var(--muted); }
.tp-note .tp-note-title { margin-bottom: 4px; color: var(--text); font-weight: 750; font-size: 16px; }
.tp-notice { margin: 4px auto 0; max-width: 620px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn); font-size: 13.5px; }
/* Ação dentro do aviso ("Desfazer", "Abrir em WORD para PDF"): link sublinhado, na cor do texto. */
.tp-notice .tp-notice-act { color: inherit; font-size: inherit; font-weight: 750; text-decoration: underline; }
.tp-notice:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Resultado recente (shell/sessao.js): o que já estava no servidor antes de recarregar a
   página ou de "Escolher outros arquivos" — baixar ou apagar até o prazo. Nível 1. */
.tp-recent-box { display: flex; flex-direction: column; gap: 12px; max-width: 620px; margin: 30px auto 0; text-align: left; }
.tp-recent { padding: 14px 16px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--elev-1); }
.tp-recent-head { display: flex; align-items: flex-start; gap: 12px; }
.tp-recent-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 18px; }
.tp-recent-text { flex: 1; min-width: 0; }
.tp-recent-title { margin: 0; font-size: 16px; font-weight: 750; letter-spacing: -.01em; }
.tp-recent-sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.tp-recent-close { width: 34px; height: 34px; font-size: 16px; }
.tp-recent-list { list-style: none; margin: 10px 0 0; padding: 0; }
.tp-recent-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--border); }
.tp-recent-file .ficon { width: 24px; height: 28px; }
.tp-recent-body { display: flex; flex-direction: column; min-width: 0; }
.tp-recent-name { overflow: hidden; font-weight: 650; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.tp-recent-meta { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tp-recent-row.is-error .tp-recent-meta { color: var(--bad); }
.tp-recent-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tp-recent-msg { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.tp-recent-msg:empty { display: none; }
.tp-recent-done { margin: 0; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--good-soft); color: var(--good); font-size: 14px; font-weight: 650; text-align: center; }

/* ---------- Área de trabalho ---------- */

.tp-work { display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: calc(100vh - var(--header-h)); }
.tp-main { min-width: 0; padding: 26px 32px 56px; }
.tp-main-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; min-height: 48px; }
/* Contagem e "Limpar" à esquerda, longe do "+" (à direita). */
.tp-main-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-width: 0; }
.tp-count { margin: 0; color: var(--muted); font-weight: 650; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.tp-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.tp-sort { display: flex; gap: 6px; }
.tp-add-n {
  position: absolute; top: -5px; right: -5px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  display: grid; place-items: center; background: var(--text); color: var(--surface); font-size: 12px; font-weight: 750;
  box-shadow: 0 0 0 2px var(--bg);
}
.tp-add-n:empty { display: none; }
.tp-main > .tp-notice { margin: 0 0 16px; max-width: none; }
.tp-order-hint { margin: -6px 0 16px; }

.tp-grid { display: grid; grid-template-columns: repeat(auto-fit, 188px); justify-content: center; gap: 22px; }

/* Cartão de arquivo (nível 1; com o mouse, nível 2) */
.card {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 10px 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--elev-1);
  transition: box-shadow .15s, border-color .15s, opacity .15s, transform .15s;
}
/* Com o mouse: nível 2 (no escuro a superfície também clareia — sombra quase não aparece no escuro). */
.card:hover { background: var(--surface-raised); box-shadow: var(--elev-2); border-color: var(--border-mid); }
.card-top { position: relative; }
/* Trilhas de 100%: sem elas a linha do grid é "auto" e o max-height: 100% da miniatura
   não vale — foto em pé e página de PDF saíam cortadas em vez de caber no quadro. */
.card-thumb {
  display: grid; grid-template-rows: 100%; grid-template-columns: 100%; place-items: center;
  height: 196px; overflow: hidden; border-radius: 10px; background: var(--surface-sunken); box-shadow: var(--inset);
}
.card-thumb .thumb-media { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .25s; }
.card-thumb > .ficon { width: 62px; height: 70px; }
.card.thumb-pdf .card-thumb { padding: 12px; }
/* A folha do PDF é branca nos dois temas (é o documento). */
.card.thumb-pdf .thumb-media { background: #fff; box-shadow: var(--page-shadow); }
.card.thumb-img .card-thumb { background: repeating-conic-gradient(var(--checker) 0 25%, transparent 0 50%) 0 0 / 14px 14px, var(--surface-sunken); }
.card-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; }
.card:hover .card-actions, .card:focus-within .card-actions, .card.is-error .card-actions { opacity: 1; }
@media (hover: none) { .card-actions { opacity: 1; } }
/* Botões redondos sobre a miniatura: flutuam (nível 2) para se destacar de qualquer imagem. */
.card-btn {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface-overlay); color: var(--text); font-size: 16px; cursor: pointer; box-shadow: var(--elev-2);
  transition: background-color .12s, color .12s;
}
.card-btn:hover:not(:disabled) { background: var(--accent-fill); color: var(--on-accent); border-color: transparent; }
.card-btn:active:not(:disabled) { box-shadow: var(--elev-1); }
.card-rm:hover:not(:disabled) { background: var(--bad-fill); color: var(--on-accent); }
.card-btn:focus-visible { outline-offset: 2px; border-radius: 50%; }
.card-grip { cursor: grab; touch-action: none; }
/* Mover sem arrastar (WCAG 2.5.7): antes e depois no pé da miniatura, com o mouse ou o foco
   no cartão (no toque, sempre à vista). */
.card-move { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; justify-content: space-between; pointer-events: none; opacity: 0; transition: opacity .15s; }
.card-move .card-btn { pointer-events: auto; }
.card-move .card-btn:disabled { visibility: hidden; }
.card:hover .card-move, .card:focus-within .card-move { opacity: 1; }
@media (hover: none) { .card-move { opacity: 1; } }
.card-grip svg { stroke-width: 3; }
.card-order {
  position: absolute; top: -18px; left: -18px; z-index: 1; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px;
  display: grid; place-items: center; background: var(--text); color: var(--surface); font-size: 13px; font-weight: 750;
  box-shadow: 0 0 0 3px var(--bg), var(--elev-1);
}
.card-body { min-width: 0; padding: 10px 4px 0; }
.card-name { margin: 0; font-weight: 650; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.card-err { margin: 6px 0 0; color: var(--bad); font-size: 12.5px; font-weight: 650; }
.card.is-error { border-color: color-mix(in srgb, var(--bad) 55%, var(--border)); box-shadow: var(--elev-1), 0 0 0 1px color-mix(in srgb, var(--bad) 35%, transparent); }
/* Selecionado (ex.: o que está no editor de recorte): anel de acento + ✓ no canto. */
.card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--elev-2); }
.card.is-selected::before, .card.is-selected::after {
  content: ""; position: absolute; top: 16px; left: 16px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; pointer-events: none;
}
.card.is-selected::before { background: var(--accent); box-shadow: 0 0 0 2px var(--surface), var(--elev-1); }
.card.is-selected::after { background: var(--on-mark); -webkit-mask: var(--i-check) center / 13px no-repeat; mask: var(--i-check) center / 13px no-repeat; }
.card.is-locked { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); }
.card-extra:not(:empty) { margin-top: 8px; }
.card-lock { margin-top: 8px; }
.card-lock-msg, .card-lock-ok { display: flex; gap: 6px; align-items: center; margin: 0 0 6px; font-size: 12.5px; font-weight: 650; color: var(--warn); }
.card-lock-msg.bad { color: var(--bad); }
.card-lock-ok { color: var(--good); display: inline-flex; margin: 0 8px 0 0; }
.card-lock .link { font-size: 12.5px; }
.pw-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pw-form input { flex: 1 1 120px; min-width: 0; padding: 6px 9px; font-size: 13px; }
.pw-field { position: relative; display: flex; flex: 1 1 120px; min-width: 0; }
.pw-field input { width: 100%; padding-right: 34px; }
.pw-eye {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; font-size: 16px;
}
.pw-eye:hover { color: var(--text); background: var(--state-hover); }
.pw-eye[aria-pressed=true] { color: var(--accent); }
.card-skip { margin-top: 6px; font-size: 12.5px; }

/* Reordenar */
.tp-grid.sortable .card { cursor: grab; user-select: none; -webkit-user-select: none; }
.tp-grid.is-sorting, .tp-grid.is-sorting * { cursor: grabbing !important; }
.card.dragging { opacity: .45; outline: 2px dashed var(--accent); outline-offset: 3px; }

/* Barra lateral (nível 2): superfície elevada, sombra projetada sobre a área de trabalho. */
.tp-side {
  position: sticky; top: var(--header-h); align-self: start; display: flex; flex-direction: column;
  height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h));
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--elev-side);
}
.tp-side-head { padding: 22px 24px 16px; border-bottom: 1px solid var(--border); }
.tp-side-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.tp-options { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; }
.tp-no-opts { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 14px; }
.tp-side-foot { padding: 16px 24px 22px; border-top: 1px solid var(--border); background: var(--surface); }
.tp-why { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.tp-why:empty { display: none; }
.tp-why.warn { color: var(--warn); }

/* ---------- Processamento ---------- */

.tp-proc { max-width: 680px; margin: 0 auto; padding: 104px 24px 96px; text-align: center; }
/* Trilha afundada (sombra interna) e preenchimento no acento: ≥ 3:1 entre os dois. */
.tp-bar {
  position: relative; max-width: 540px; height: 12px; margin: 34px auto 16px; overflow: hidden; border-radius: 99px;
  background: var(--surface-3); box-shadow: var(--inset);
}
.tp-bar span { display: block; height: 100%; width: 3%; border-radius: 99px; background: var(--accent); transition: width .35s ease; }
.tp-bar.is-busy span {
  background-image: linear-gradient(45deg, rgb(255 255 255 / .22) 25%, transparent 25%, transparent 50%, rgb(255 255 255 / .22) 50%, rgb(255 255 255 / .22) 75%, transparent 75%);
  background-size: 28px 28px; animation: tp-stripes .9s linear infinite;
}
@keyframes tp-stripes { to { background-position: 28px 0; } }
.tp-proc-status { margin: 0 0 6px; font-weight: 700; font-size: 16.5px; font-variant-numeric: tabular-nums; }
.tp-proc .hint { margin-bottom: 26px; }

/* ---------- Resultado ---------- */

.tp-done { max-width: 860px; margin: 0 auto; padding: 60px 24px 72px; text-align: center; }
.tp-dl { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 30px 0 6px; }
.tp-dl-slot:empty { display: none; }
.tp-back { width: 56px; height: 56px; }
/* Sem nada pronto, o "←" diz o que faz: "Voltar e mudar as opções". */
.tp-back.has-label { display: inline-flex; align-items: center; width: auto; gap: 8px; padding: 0 20px 0 16px; border-radius: 999px; font-size: 15px; font-weight: 650; }
.tp-back.has-label svg { font-size: 20px; }
.tp-done-msg { margin: 14px auto 0; max-width: 620px; color: var(--muted); font-size: 14px; }
.tp-done-msg:empty { display: none; }
.tp-done-msg.warn { color: var(--warn); }
.tp-retry-slot { margin-top: 10px; }
.tp-retry-slot:empty { display: none; }
.tp-summary {
  display: flex; align-items: center; justify-content: center; gap: 22px; max-width: 600px; margin: 22px auto 0; padding: 20px 26px;
  text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--elev-1);
}
/* Anel da economia (o mesmo desenho do Comprimir PDF). */
.tp-ring { position: relative; flex: none; display: grid; place-items: center; width: 112px; height: 112px; }
.tp-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Trilha (decorativa, clara): borda de um círculo atrás do arco, na mesma espessura. */
.tp-ring::before { content: ""; position: absolute; inset: 1px; border-radius: 50%; border: 11px solid var(--good-soft); }
.tp-ring-arc { fill: none; stroke: var(--good); stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray 1.1s cubic-bezier(.2, .8, .2, 1); }
.tp-ring-in { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.tp-ring-pct { font-weight: 800; font-size: 27px; letter-spacing: -.035em; color: var(--text); font-variant-numeric: tabular-nums; }
.tp-ring-sub { margin-top: 4px; font-size: 10.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--good); }
.tp-sum-ico { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--good-soft); color: var(--good); font-size: 32px; }
.tp-sum-ico.warn { background: var(--warn-soft); color: var(--warn); }
.tp-save-text { min-width: 0; }
.tp-save-text p { margin: 0; color: var(--muted); }
.tp-save-text b { color: var(--text); }
.tp-save-text .tp-save-big { margin-bottom: 2px; color: var(--text); font-weight: 750; font-size: 18px; }
.tp-save-text .tp-save-sizes { font-size: 16px; font-variant-numeric: tabular-nums; }
.tp-save-text .tp-save-less { margin-top: 2px; color: var(--good); font-weight: 650; font-size: 13.5px; }
/* Um resultado só: o nome do arquivo e as notas (o que a linha da lista dizia), logo abaixo do resumo. */
.tp-file-line { display: flex; justify-content: center; gap: 6px; align-items: flex-start; max-width: 600px; margin: 10px auto 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.tp-file-line svg { flex: none; margin-top: 2px; font-size: 14px; }
.tp-results-box { max-width: 700px; margin: 22px auto 0; }
.tp-results {
  list-style: none; margin: 0; padding: 0; overflow: hidden; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--elev-1);
}
.tp-results-more { margin-top: 10px; }
.res { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.res:last-child { border-bottom: 0; }
.res-ico { display: grid; place-items: center; }
.res-ico .ficon { width: 28px; height: 32px; }
.res-ico.bad { color: var(--bad); font-size: 22px; }
.res-body { min-width: 0; }
.res-name { margin: 0; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-meta { margin: 2px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.res-meta b { color: var(--text); }
.res.is-error { background: var(--bad-soft); }
.res.is-error .res-meta { color: var(--bad); }
.res.is-kept .res-meta { color: var(--info); }
.res.is-warn .res-meta { color: var(--warn); }
.res .pw-form { margin-top: 8px; }
/* O que tem dentro do .zip do servidor (entries), recolhido. */
.res-entries { margin-top: 6px; font-size: 13px; }
.res-entries > summary { width: fit-content; color: var(--accent); font-weight: 650; cursor: pointer; border-radius: 6px; }
.res-entries ol { margin: 6px 0 0; padding-left: 22px; max-height: 220px; overflow-y: auto; color: var(--muted); overflow-wrap: anywhere; }
.res-entries .hint { margin-top: 4px; }
/* Prazo, "Apagar agora" e "Escolher outros arquivos": logo abaixo do download, sempre à vista. */
.tp-done-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; max-width: 720px; margin: 14px auto 0; color: var(--muted); font-size: 13.5px; }
.tp-ttl { display: inline-flex; gap: 7px; align-items: center; margin: 0; }
.tp-ttl svg { font-size: 16px; }
.tp-done-acts { display: flex; align-items: center; gap: 14px; }
/* "Continuar para…" logo depois do resumo: 3 colunas na tela larga, 6 à vista + "Ver mais". */
.tp-continue { max-width: 860px; margin: 30px auto 0; }
.tp-cont-title { margin: 0 0 2px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.tp-cont-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 10px; text-align: left; }
.tp-cont-more { margin-top: 12px; }
/* "Continuar para…": cartões nível 1 que sobem para o 2 com o mouse. */
.tp-cont-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); font: inherit; font-weight: 650; font-size: 14.5px; text-align: left; cursor: pointer;
  box-shadow: var(--elev-1); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tp-cont-btn:hover:not(:disabled, [aria-disabled=true]) { background: var(--surface-raised); border-color: var(--accent); box-shadow: var(--elev-2); transform: translateY(-1px); }
.tp-cont-btn:active:not(:disabled, [aria-disabled=true]) { box-shadow: var(--elev-1); transform: none; }
.tp-cont-btn:disabled, .tp-cont-btn[aria-disabled=true] { color: var(--muted); box-shadow: none; cursor: default; }
.tp-cont-go { margin-left: auto; color: var(--muted); }
.tp-cont-btn:hover:not(:disabled, [aria-disabled=true]) .tp-cont-go { color: var(--accent); }

/* Camada "Solte os arquivos aqui" (nível 4; arrastar em qualquer lugar da página) */
.drop-layer { position: fixed; inset: 0; z-index: 150; pointer-events: none; background: color-mix(in srgb, var(--accent) 14%, var(--backdrop)); }
.drop-layer-box {
  position: absolute; inset: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  border: 3px dashed var(--accent); border-radius: 24px; background: color-mix(in srgb, var(--surface-overlay) 92%, transparent);
  color: var(--accent); font-size: 24px; box-shadow: var(--elev-4);
}
.drop-layer-box svg { font-size: 56px; }

/* ---------- Celular e tablet ---------- */

@media (max-width: 899px) {
  /* O foco nunca para atrás da barra fixa do botão (a altura dela vem do toolpage.js). */
  html { scroll-padding-bottom: calc(var(--tp-foot-h, 0px) + 12px); }
  .tp-work { grid-template-columns: 1fr; min-height: 0; }
  .tp-main { padding: 18px 16px 8px; }
  .tp-grid { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); justify-content: stretch; gap: 12px; }
  .card-thumb { height: 150px; }
  .card.thumb-pdf .card-thumb { padding: 8px; }
  /* A barra vira uma seção abaixo dos cartões; o botão fica fixo no rodapé da tela,
     com sombra para cima (flutua sobre o conteúdo que rola por baixo). */
  .tp-side { position: static; height: auto; border-left: 0; border-top: 1px solid var(--border); box-shadow: none; padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
  .tp-side-head { padding: 18px 16px 12px; }
  .tp-side-title { font-size: 19px; }
  .tp-options { overflow: visible; padding: 16px; }
  .tp-side-foot {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface-raised); box-shadow: var(--elev-up);
  }
  .tp-why { margin-bottom: 8px; }
}

/* Pouca altura (celular deitado, zoom de 200 a 400%): o botão sai do rodapé fixo e vai no
   fim das opções — fixos, ele e o cabeçalho cobriam quase toda a tela (WCAG 1.4.10). */
@media (max-width: 899px) and (max-height: 560px) {
  .tp-side { padding-bottom: 0; }
  .tp-side-foot { position: static; padding: 12px 16px 20px; box-shadow: none; border-top: 1px solid var(--border); }
}

@media (max-width: 640px) {
  .tp-hero { padding: 40px 16px 56px; }
  .tp-lead { margin-bottom: 28px; }
  .tp-fine { font-size: 12.5px; }
  .tp-main-head { flex-wrap: wrap; }
  .tp-proc { padding: 64px 16px; }
  .tp-done { padding: 40px 16px 56px; }
  .tp-dl { gap: 10px; }
  .tp-dl .btn-hero { width: auto; flex: 1; min-width: 0; font-size: 17px; padding: 0 16px; }
  /* Falha: "Tentar de novo" em cima, largo; "Voltar e mudar as opções" embaixo. */
  .tp-dl.has-back-label { flex-direction: column-reverse; align-items: stretch; }
  .tp-dl.has-back-label .btn-hero { flex: none; width: 100%; }
  .tp-dl.has-back-label .tp-back { justify-content: center; }
  .tp-summary { flex-direction: column; text-align: center; padding: 18px 16px; }
  .res { grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px; }
  .res > .btn { grid-column: 2 / -1; justify-self: start; }
  .tp-cont-list { grid-template-columns: 1fr; }
  .drop-layer-box { font-size: 19px; }
}

/* ---------- Alto contraste do Windows (forced-colors) ----------
   Fundo e sombra somem: a barra de progresso ganha contorno e preenchimento em cor do
   sistema; o cartão escolhido, o ✓ de volta; caixas do resultado, contorno. */
@media (forced-colors: active) {
  .tp-bar { border: 1px solid CanvasText; }
  .tp-bar span { forced-color-adjust: none; background: Highlight; }
  .card.is-selected { outline: 3px solid Highlight; outline-offset: 1px; }
  .card.is-selected::before { forced-color-adjust: none; background: Highlight; box-shadow: 0 0 0 2px Canvas; }
  .card.is-selected::after { forced-color-adjust: none; background: HighlightText; }
  .card.is-error { outline: 2px solid CanvasText; }
  .tp-ring::before { border-color: GrayText; }
  .tp-ring-arc { stroke: Highlight; }
  .tp-cont-btn, .tp-recent, .tp-summary, .tp-results { border: 1px solid CanvasText; }
  .drop-layer-box { border-color: Highlight; }
}