/* content.css — a frente "conteúdo e conta" da v2 (docs/specs/ui-v2.md §6.4): "Onde conseguir", Missões, Presença diária, Bestiário,
   Catálogo e Loja, as janelas clássicas HOSPEDADAS no modo fluido (`windowSheet › fluid`: o `--px` é o pixel de arte da v2 e a janela
   ocupa a folha). Inerte sem `html.ui-v2`. O que muda de lugar na instância é de `ui/v2/hostedContent.js`; aqui, só o arranjo, o alvo
   do dedo (46, `--v2-target`) e a letra (16 no corpo, 13 na secundária). A conta de cada arranjo é a do iPhone deitado no app (folha de
   763 × 288 sem entalhe, 675 × 288 com ele) e a do SE (651 × 287). */

/* ---- o que as seis dividem: as abas e os botões na régua da v2 ---- */
html.ui-v2 .v2-hosted.is-fluid :is(.window-tabs, .filterbar-tabs, .quests-tabs, .shop-tabs) > :is(.tab, .btn) {
  --px: var(--ap);
  height: auto;
  min-height: var(--v2-target);
  min-width: var(--v2-target);
  padding: 0 calc(12 * var(--u));
  font-size: var(--v2-text);
}
html.ui-v2 :is(.v2-hosted-sources, .v2-hosted-quests, .v2-hosted-daily, .v2-hosted-bestiary, .v2-hosted-codex, .v2-hosted-shop) .btn {
  --px: var(--ap);
  min-height: var(--v2-target);
  min-width: var(--v2-target);
  padding: 0 calc(12 * var(--u));
  font-size: var(--v2-text);
}
/* a busca e os controles que sobem para o cabeçalho da folha (Bestiário e Catálogo: `hostedContent.js`). O título cede e as
   ferramentas tomam a sobra, presas à direita (o polegar): a busca CRESCE com ela (de 140 a 260) — com largura fixa, ela cortava o
   "Procurar monstro" no iPhone e deixava 204 px vazios no SE (revisão P2-12) */
#ui2 :is(.v2-sheet-codex, .v2-sheet-bestiary) .v2-sheet-title { flex: 0 1 auto; min-width: 0; }
#ui2 :is(.v2-sheet-codex, .v2-sheet-bestiary) .v2-sheet-actions { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
#ui2 :is(.v2-sheet-codex, .v2-sheet-bestiary) .v2-sheet-head-tools { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
#ui2 .v2-sheet-head-tools .filterbar { flex: 1 1 auto; min-width: 0; justify-content: flex-end; display: flex; align-items: center; gap: var(--v2-gap); height: auto; margin: 0; }
#ui2 .v2-sheet-head-tools .filterbar-search {
  --px: var(--ap);
  flex: 1 1 calc(140 * var(--u));
  width: auto;
  min-width: calc(120 * var(--u));
  max-width: calc(260 * var(--u));
  min-height: var(--v2-target);
  padding: 0 calc(10 * var(--u));
  font-size: max(16px, var(--v2-text));
}
/* ação é letra de 16 (§2: a de 13 é de contador e selo, nunca de ação — revisão P2-09) */
#ui2 .v2-sheet-head-tools :is(#codex-class, .bestiary-filter) {
  --px: var(--ap);
  flex: none;
  height: auto;
  min-height: var(--v2-target);
  padding: 0 calc(12 * var(--u));
  font-size: var(--v2-text);
  white-space: normal;
  line-height: 1.15;
  max-width: calc(170 * var(--u));
}
#ui2 .v2-sheet-head-tools .codex-toggle { flex: none; min-height: var(--v2-target); gap: calc(6 * var(--u)); font-size: var(--v2-text); }
/* o interruptor (16 × 10 de arte) em 2× e o respiro até o alvo de 46: o toque cresce, o desenho não distorce */
#ui2 .v2-sheet-head-tools .codex-toggle > .toggle {
  box-sizing: content-box;
  width: calc(32 * var(--ap));
  height: calc(20 * var(--ap));
  padding: calc((var(--v2-target) - 20 * var(--ap)) / 2) calc(max(0px, var(--v2-target) - 32 * var(--ap)) / 2);
  background-origin: content-box;
  background-clip: content-box;
}
/* BUSCANDO com o teclado aberto (o foco na busca do cabeçalho, §3.2): a faixa visível tem ~150 px, e o corpo fica só com o
   resultado — saem o rodapé (o "Receber tudo", a contagem do Catálogo) e a fila das abas do Catálogo (buscando, nenhuma aba vale:
   `codex.js` as apaga). Sem isso sobravam 19–44 px de grade e o jogador não via o que achou (revisão P2-17) */
html.ui-v2.v2-kb #ui2 .v2-sheet:has(.v2-sheet-head :focus) > .v2-sheet-body { padding-block: calc(4 * var(--u)); }
html.ui-v2.v2-kb #ui2 .v2-sheet:has(.v2-sheet-head :focus) :is(.window-footer, .v2-hosted-codex .codex-body > .filterbar, .bestiary-section-title) { display: none; }

/* ================================================================================================================================
   ONDE CONSEGUIR — uma linha por origem com o verbo de 46 à direita; os insumos em duas colunas de peças de 48
   ================================================================================================================================ */
/* o ◀ da trilha da janela some: o ◀ da folha volta um passo do mergulho antes de fechar (`hostedContent.js › sourcesBack`) */
#ui2 .v2-sheet-sources #sources-back { display: none; }
html.ui-v2 .v2-hosted-sources .sources-body { gap: var(--v2-gap); font-size: var(--v2-text); }
html.ui-v2 .v2-hosted-sources .src-head { gap: var(--v2-gap); }
html.ui-v2 .v2-hosted-sources .src-head-text { gap: calc(4 * var(--u)); line-height: 1.25; }
html.ui-v2 .v2-hosted-sources .src-row { min-height: var(--v2-target); gap: var(--v2-gap); padding: calc(4 * var(--u)) 0; }
html.ui-v2 .v2-hosted-sources .src-main { line-height: 1.25; }
html.ui-v2 .v2-hosted-sources .src-more { font-size: var(--v2-text-small); }
html.ui-v2 .v2-hosted-sources .src-mat { min-height: var(--v2-target); gap: var(--v2-gap); }
html.ui-v2 .v2-hosted-sources .src-mat-text { line-height: 1.25; }
/* o selo ("Sem trabalhador", "Expl. 14") é letra secundária, na caixa da letra (a altura de 8 px de arte cortava a de 16 — P2-11) */
html.ui-v2 .v2-hosted-sources .src-seal { font-size: var(--v2-text-small); line-height: 1.25; height: auto; padding: 0 calc(4 * var(--u)); }

/* ================================================================================================================================
   MISSÕES — as abas e o relógio numa fila de 46; cada missão um cartão com o "Recolher" de 46
   ================================================================================================================================ */
html.ui-v2 .v2-hosted-quests .quests-body { gap: var(--v2-gap); font-size: var(--v2-text); }
html.ui-v2 .v2-hosted-quests .quests-head { height: auto; min-height: var(--v2-target); flex-wrap: wrap; gap: var(--v2-gap); }
html.ui-v2 .v2-hosted-quests .quests-tabs { gap: calc(6 * var(--u)); }
html.ui-v2 .v2-hosted-quests .quests-clock { font-size: var(--v2-text-small); }
html.ui-v2 .v2-hosted-quests .quests-list { gap: var(--v2-gap); }
/* deitado, o cartão em duas faixas: à esquerda o nome, a descrição e a barra fina; à direita o prêmio e o "Recolher", na altura
   do cartão inteiro (em coluna, eram 112–124 px por missão: 1,9 cartão por tela e a aba Conquistas com 13,8 telas). As três
   linhas são explícitas e o respiro é margem: sem a barra (progresso zero), a terceira linha não custa nada */
html.ui-v2 .v2-hosted-quests .quests-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: calc(12 * var(--u));
  row-gap: 0;
  padding: calc(6 * var(--u)) calc(10 * var(--u));
}
html.ui-v2 .v2-hosted-quests .quests-row > :not(.quests-row-foot) { grid-column: 1; }
html.ui-v2 .v2-hosted-quests .quests-row-head { gap: var(--v2-gap); line-height: 1.25; }
html.ui-v2 .v2-hosted-quests .quests-desc { margin-top: calc(2 * var(--u)); white-space: normal; font-size: calc(15 * var(--u)); line-height: 1.3; color: var(--c-text-dim); }
html.ui-v2 .v2-hosted-quests .quests-bar { margin-top: calc(6 * var(--u)); height: calc(6 * var(--u)); }
html.ui-v2 .v2-hosted-quests .quests-row-foot {
  grid-column: 2;
  grid-row: 1 / 4;
  justify-content: flex-end;
  max-width: calc(320 * var(--u));
  min-height: 0;
  gap: var(--v2-gap);
}
html.ui-v2 .v2-hosted-quests .quests-reward { gap: calc(6 * var(--u)); font-size: calc(15 * var(--u)); }
html.ui-v2 .v2-hosted-quests .quests-section-title { font-size: var(--v2-text-small); padding-bottom: calc(4 * var(--u)); }

/* ================================================================================================================================
   PRESENÇA DIÁRIA — a semana numa fila (daily.md §8): a instância, as peças e os estados são os da clássica (`windows/daily.js`,
   `css/daily.css`); aqui só o arranjo. Fluida, SEM a coluna do polegar: o rodapé em fila embaixo, o estado à esquerda e as ações
   à direita (roadmap §4 `daily-v2-rodape`); o contador `N dias` no cabeçalho (`hostedContent.js › dailyLayout`). A faixa vai
   centrada nos dois eixos, com até 440 px de arte: 440 = 7,5 colunas + 6 vãos de 4 + a moldura 2 × 6 → a coluna de 54 de arte
   (81 CSS no celular, 108 no pc) e a do dia 7 com 1,5×; no iPhone com entalhe e no SE ela encolhe pela largura (1fr = 53 e 51)
   ================================================================================================================================ */
/* a faixa se centra pelas margens automáticas: centrar pelo flex cortaria o topo dela quando passa da altura e o corpo rola */
html.ui-v2 .v2-hosted-daily .dy-body { gap: 0; font-size: var(--v2-text); }
html.ui-v2 .v2-hosted-daily .dy-week {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.5fr);
  align-items: stretch;
  width: 100%;
  max-width: calc(440 * var(--px));
  margin: auto;
}
html.ui-v2 .v2-hosted-daily .dy-week.is-loading { display: flex; min-width: 0; }
/* a célula toma a largura da coluna (a da clássica é fixa: 48 e 72) e a altura do que ela leva na letra da v2: `Dia N` e a nota
   na letra de contador (13), o ícone 32 de arte; o `[moeda] N` na 13 (a `.gold-label` hospedada vai a 16 em `v2.css`), e na 16
   só onde o miolo da célula passa de 6,2 em da letra 13 (a conta anda com o `u`): `[moeda] 99.999` na 16 mede 5,7 em (74 CSS no
   celular, 89 no pc), e o miolo é 73 no iPhone, 72 no SE e 96 no pc (medido no kit, 2026-10-07) */
html.ui-v2 .v2-hosted-daily .dy-cell {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: calc(72 * var(--px));
  font-size: var(--v2-text-small);
  line-height: 1.25;
  container: dy-cell / inline-size;
}
html.ui-v2 .v2-hosted-daily .dy-cell-note { min-height: 1.25em; }
html.ui-v2 .v2-hosted-daily .dy-cell-gold { font-size: var(--v2-text-small); }
@container dy-cell (min-width: 6.2em) {
  html.ui-v2 .v2-hosted-daily .dy-cell-gold { font-size: var(--v2-text); }
}
html.ui-v2 .v2-hosted-daily .dy-footer { min-height: var(--v2-target); }
html.ui-v2 .v2-hosted-daily .dy-status { font-size: var(--v2-text); line-height: 1.25; }
html.ui-v2 .v2-hosted-daily .dy-wait { font-size: var(--v2-text-small); line-height: 1.3; }
/* o contador no cabeçalho, na letra de contador, e o alvo de TOQUE da dica dele: um `::after` absoluto leva a linha a 46+ sem
   mexer no cabeçalho (o molde da clássica, `daily.css › .dy-body > .dy-total`, que lá dentro do corpo não casa mais) */
#ui2 .v2-sheet-head-tools .dy-total { position: relative; flex: none; align-self: center; font-size: var(--v2-text-small); line-height: 1.25; }
#ui2 .v2-sheet-head-tools .dy-total::after { content: ''; position: absolute; left: calc(-8 * var(--u)); right: calc(-8 * var(--u)); top: calc(-15 * var(--u)); bottom: calc(-15 * var(--u)); }
/* a linha do prêmio do dia no COLETAR (§8): o ouro de hoje ao lado dos consumíveis e, com a recusa da mochila cheia de pé, o selo
   (G2: moldura + palavra curta + a cor de perigo) — o Coletar dela trava com o motivo, como o Receber da janela */
#ui2 .v2-collect-gold { --px: var(--ap); flex: none; font-size: var(--v2-text); }
#ui2 .v2-collect-seal {
  flex: none;
  padding: 0 calc(6 * var(--u));
  border: calc(1 * var(--u)) solid var(--c-danger);
  border-radius: calc(3 * var(--u));
  color: var(--c-danger);
  font-size: var(--v2-text-small);
  line-height: 1.6;
  white-space: nowrap;
}

/* ================================================================================================================================
   BESTIÁRIO — o livro inteiro no corpo (a busca e o filtro no cabeçalho); o "Receber tudo" no pé, à direita
   ================================================================================================================================ */
html.ui-v2 .v2-hosted-bestiary .bestiary-body { gap: var(--v2-gap); font-size: var(--v2-text); }
html.ui-v2 .v2-hosted-bestiary .bestiary-section-title { font-size: var(--v2-text); line-height: 1.25; }
/* o nome em até duas linhas inteiras na letra de 13 (a altura travada de 18 px de arte cortava a 2.ª linha: "Vespa da Campina") */
html.ui-v2 .v2-hosted-bestiary .bestiary-card-name { font-size: var(--v2-text-small); line-height: 1.15; height: 2.3em; }
html.ui-v2 .v2-hosted-bestiary .bestiary-footer { min-height: var(--v2-target); font-size: var(--v2-text-small); }
html.ui-v2 .v2-hosted-bestiary .bestiary-folio { gap: var(--v2-gap); }
/* a ficha aberta: a busca e o filtro que subiram para o cabeçalho ficam inertes (a janela marca a barra) e somem, como na clássica
   (`bestiary.css › .bestiary-body > .is-under-folio`, que no cabeçalho não casa mais — revisão P2-04) */
#ui2 .v2-sheet-head-tools .filterbar.is-under-folio { visibility: hidden; }
/* o "◀ Livro" da ficha é o mesmo gesto do ◀ da folha (a camada de dentro primeiro): sai da vista e fica para o leitor de tela e o
   foco que a janela põe nele ao abrir — eram duas setas iguais empilhadas no canto, e a fila comia 56 px do corpo (revisão P2-05) */
html.ui-v2 .v2-hosted-bestiary .bestiary-folio-top {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html.ui-v2 .v2-hosted-bestiary :is(.bestiary-desc, .bestiary-hint, .bestiary-where-row) { font-size: calc(15 * var(--u)); line-height: 1.3; }
html.ui-v2 .v2-hosted-bestiary .bestiary-seal { font-size: var(--v2-text-small); line-height: 1.25; }

/* ================================================================================================================================
   CATÁLOGO — a fila das abas em cima, a grade de peças de 48 e a ficha ao lado
   ================================================================================================================================ */
html.ui-v2 .v2-hosted-codex .codex-body { gap: var(--v2-gap); font-size: var(--v2-text); }
html.ui-v2 .v2-hosted-codex .filterbar { height: auto; min-height: var(--v2-target); gap: var(--v2-gap); flex-wrap: wrap; }
html.ui-v2 .v2-hosted-codex .filterbar-tabs { gap: calc(6 * var(--u)); flex-wrap: wrap; }
html.ui-v2 .v2-hosted-codex .codex-content { gap: calc(12 * var(--u)); min-width: 0; }
/* a prateleira em DEZ colunas quando os dez tiers cabem ao lado da ficha, senão em CINCO (5 + 5: a progressão continua legível;
   com o que coubesse, o iPhone com entalhe partia a de dez em 9 + 1 — revisão P2-10). Quem conta é `hostedContent.js ›
   codexLayout` (`--v2-codex-cols` e a largura da grade); a ficha fica com o resto e nunca sai da tela. Entre as peças, 4 de vão:
   encostadas, a ponta do dedo na borda abria a peça vizinha */
html.ui-v2 .v2-hosted-codex .codex-gridcol { width: auto; flex: 0 0 var(--v2-codex-w, auto); min-width: 0; }
html.ui-v2 .v2-hosted-codex .codex-grid {
  gap: calc(4 * var(--u));
  grid-template-columns: repeat(var(--v2-codex-cols, auto-fill), calc(var(--codex-step) * var(--px)));
}
html.ui-v2 .v2-hosted-codex .codex-sheetcol { width: auto; flex: 1 1 calc(200 * var(--u)); min-width: calc(160 * var(--u)); }
html.ui-v2 .v2-hosted-codex .codex-shelf-head { font-size: var(--v2-text); line-height: 1.25; height: auto; min-height: calc(24 * var(--u)); }
html.ui-v2 .v2-hosted-codex .codex-shelf-count { font-size: var(--v2-text-small); }
html.ui-v2 .v2-hosted-codex .codex-tier { font-size: var(--v2-text-small); line-height: 1; }
html.ui-v2 .v2-hosted-codex .codex-sheetcol { font-size: calc(15 * var(--u)); line-height: 1.3; gap: var(--v2-gap); }
html.ui-v2 .v2-hosted-codex :is(.codex-meta, .codex-hint, .codex-desc) { line-height: 1.3; }
html.ui-v2 .v2-hosted-codex .codex-link { min-height: var(--v2-target); display: inline-flex; align-items: center; }
html.ui-v2 .v2-hosted-codex .window-footer { font-size: var(--v2-text-small); }

/* ================================================================================================================================
   LOJA — as ofertas em linhas de 56, o preço e o verbo de 46 à direita
   ================================================================================================================================ */
html.ui-v2 .v2-hosted-shop .shop-body { gap: var(--v2-gap); font-size: var(--v2-text); }
html.ui-v2 .v2-hosted-shop .shop-tabs { gap: calc(6 * var(--u)); }
html.ui-v2 .v2-hosted-shop .shop-offers { gap: var(--v2-gap); }
html.ui-v2 .v2-hosted-shop .shop-offer { min-height: calc(56 * var(--u)); gap: calc(10 * var(--u)); padding: calc(4 * var(--u)); }
html.ui-v2 .v2-hosted-shop .shop-offer-text { gap: calc(2 * var(--u)); line-height: 1.25; }
html.ui-v2 .v2-hosted-shop .shop-offer-desc { font-size: calc(15 * var(--u)); }
html.ui-v2 .v2-hosted-shop .shop-offer-right { gap: var(--v2-gap); }
html.ui-v2 .v2-hosted-shop .shop-seal { font-size: var(--v2-text-small); line-height: 1.4; }
html.ui-v2 .v2-hosted-shop .shop-rename-line > .input { min-height: var(--v2-target); font-size: max(16px, var(--v2-text)); }
html.ui-v2 .v2-hosted-shop .shop-ledger-row { min-height: calc(32 * var(--u)); font-size: calc(15 * var(--u)); }
html.ui-v2 .v2-hosted-shop .shop-footer { gap: var(--v2-gap); }
/* --- skins --- a aba Skins (docs/specs/skins.md §10; o desenho da clássica em `css/shop.css`). O `Corpo · Arma` sobe para o cabeçalho
   da folha (`hostedContent.js › shopLayout`: as abas de lá já têm o alvo comum, `v2.css`). A grade: cartões de 96 de largura no
   mínimo (a miniatura 48 × 64 e a moldura no pixel da v2, sem escala fracionária) que dividem a sobra; o nome em até duas linhas e o
   estado na letra de 13. A coluna da prova: o palco no pixel do PALCO (148 × 150 de mundo, como na clássica: o boneco 2× que o canvas
   pinta cabe nele igual) e encostada a 4 px da borda direita do MUNDO (`--v2-shop-inset`, medido em `hostedContent.js ›
   shopStageInWorld`): a janela fluida não desliza, e o furo fora do mundo mostra preto (o celular deitado tem 102 px de cada lado
   fora dele). A ação e o rodapé (`Voltar · Confirmar · $ 300`) têm o alvo comum pela régua das seis (`.btn`). */
#ui2 .v2-sheet-head-tools .shop-skin-kinds { --px: var(--ap); gap: calc(6 * var(--u)); padding-left: 0; border-left: 0; }
html.ui-v2 .v2-hosted-shop .shop-skins { gap: calc(12 * var(--u)); }
html.ui-v2 .v2-hosted-shop .shop-skin-grid {
  grid-template-columns: repeat(auto-fill, minmax(max(calc(96 * var(--u)), calc(56 * var(--px))), 1fr));
  grid-auto-rows: auto;
  gap: calc(6 * var(--u));
  --scroll-fade-pad: calc(16 * var(--u));
}
html.ui-v2 .v2-hosted-shop .shop-skin-card { width: auto; height: auto; gap: calc(2 * var(--u)); }
html.ui-v2 .v2-hosted-shop .shop-skin-name { font-size: var(--v2-text-small); line-height: 1.15; height: 2.3em; }
html.ui-v2 .v2-hosted-shop .shop-skin-state { height: auto; min-height: calc(20 * var(--u)); font-size: var(--v2-text-small); }
html.ui-v2 .v2-hosted-shop .shop-skin-state > .shop-seal { line-height: 1.4; }
/* o rótulo do grupo no alto da casa, na altura da miniatura vizinha: centrado na casa de ~160, no celular ele caía no degradê do
   pé da grade e a exceção (G5) só aparecia rolando */
html.ui-v2 .v2-hosted-shop .shop-skin-group { align-items: flex-start; padding-top: calc(30 * var(--px)); font-size: var(--v2-text-small); line-height: 1.25; }
html.ui-v2 .v2-hosted-shop .shop-skin-side {
  width: calc(148 * var(--v2-stage-px, var(--px)));
  margin-right: var(--v2-shop-inset, 0px);
  gap: var(--v2-gap);
}
html.ui-v2 .v2-hosted-shop .shop-skin-stage { width: 100%; height: calc(150 * var(--v2-stage-px, var(--px))); }
html.ui-v2 .v2-hosted-shop :is(.shop-skin-act, .shop-skin-done, .shop-skin-msg) { width: 100%; }
html.ui-v2 .v2-hosted-shop :is(.shop-skin-done, .shop-skin-msg) { font-size: calc(15 * var(--u)); line-height: 1.3; }
html.ui-v2 .v2-hosted-shop .shop-skin-buy { gap: var(--v2-gap); }
html.ui-v2 .v2-hosted-shop :is(.shop-skin-buy-desc, #shop-skin-buy-warning, #shop-skin-buy-msg) { font-size: calc(15 * var(--u)); line-height: 1.3; }