/* ============================================================================
   v5 QUICK WINS v3 — additive sheet, zero markup changes, mobile-first.
   Restyles and reorders EXISTING markup only; nothing is removed from the DOM
   and nothing depends on JS. Derived from the v51 study and hardened by a
   three-lens adversarial audit against the SHIPPED bundle (v5-runtime.css)
   and the full corpus (734 v5 posts) on 2026-08-26.
   Scope: (0,2,x) under .v5-article / body.v5-post, matching the kit. Zero
   !important. All mobile blocks are `screen`-qualified: the print page box
   (A4 ≈ 794px) is narrower than 900px and must not inherit phone layout.
   Enqueued as 'hong-v5-quickwins' after 'hong-v5-runtime' (lib/v5-articles.php).
   Revert = remove that enqueue line.
   ========================================================================= */

/* --- QW1 · Índice em uma linha (chip rail, CSS-only) -----------------------
   O v5-toc chega no HTML com todos os links e é display:none em toda largura.
   No celular vira UMA linha de chips com rolagem horizontal: navegação
   presente, custo ~64px. Para esconder de vez: apagar este bloco. */
@media screen and (max-width: 900px) {
  .v5-article .v5-toc:not(.v5-toc--inline) {
    display: block;
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 4px 0 20px;
  }
  .v5-article .v5-toc:not(.v5-toc--inline) .v5-toc__kicker {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 8px;
  }
  .v5-article .v5-toc:not(.v5-toc--inline) ol {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }
  .v5-article .v5-toc:not(.v5-toc--inline) li { flex: 0 0 auto; scroll-snap-align: start; }
  .v5-article .v5-toc:not(.v5-toc--inline) a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;                 /* ≥24px de alvo */
    padding: 4px 12px;
    border: 1px solid var(--v5-line);
    background: var(--v5-surface);
    white-space: nowrap;
  }
  .v5-article .v5-toc:not(.v5-toc--inline) a span {
    font-size: 13.5px;
    color: var(--v5-text);
  }
  /* toque: barra oculta (o dedo rola); ponteiro fino: barra fina visível —
     sem ela, um mouse a 768-900px não descobre os chips fora da tela */
  @media (pointer: coarse) {
    .v5-article .v5-toc:not(.v5-toc--inline) ol { scrollbar-width: none; }
    .v5-article .v5-toc:not(.v5-toc--inline) ol::-webkit-scrollbar { display: none; }
  }
  @media (hover: hover) and (pointer: fine) {
    .v5-article .v5-toc:not(.v5-toc--inline) ol { scrollbar-width: thin; }
  }
}

/* --- QW2 · Barra de progresso de leitura (CSS-only, sem JS) ---------------- */
@supports (animation-timeline: scroll()) {
  body.v5-post:not(:has(.v5-progress))::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    z-index: 60;
    width: 100%;
    height: 3px;
    background: var(--v5-accent, oklch(54% 0.205 28));
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: hong-v5-read linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes hong-v5-read { to { transform: scaleX(1); } }
  @media (prefers-reduced-motion: reduce) {
    body.v5-post:not(:has(.v5-progress))::before { display: none; }
  }
}

/* --- QW4 · Aside sticky nunca mais alto que a viewport ---------------------
   A trilha E-E-A-T mede ~1.700-2.800px; sticky, a metade de baixo (DNA-USP +
   CONTATO) ficava abaixo da dobra o documento inteiro em laptops. Rolagem
   interna; SEM overscroll-behavior — o encadeamento padrão devolve a rolagem
   à página quando a trilha acaba (auditoria: contain prendia o scroll). */
@media screen and (min-width: 901px) {
  .v5-article .v5-aside {
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* --- QW5 · Contato e controles de leitura na frente, só em TELEFONE --------
   ≤680px (não 900): tablets 681-900 mantêm o empacotamento 2-colunas do
   próprio bundle. display:contents no aside; sobem apenas os controles de
   leitura e o cartão de atendimento; autor, resumo, biblioteca e selo
   continuam depois do artigo. Guarda order:9 em TODOS os filhos do grid:
   refs/endmatter como filhos diretos (2 posts no corpus) não podem saltar
   para cima do índice. Caveat conhecido e aceito como interino: a ordem de
   tabulação segue o DOM, não a visual — a correção definitiva é reordenar
   no servidor (fila "esta semana"). */
@media screen and (max-width: 680px) {
  .v5-article .v5-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
  .v5-article .v5-grid > * { order: 9; }
  .v5-article .v5-aside { display: contents; }
  .v5-article .v5-grid > .v5-toc              { order: 1; }
  .v5-article .v5-aside > .hong-a11y          { order: 2; margin-bottom: 20px; }
  .v5-article .v5-aside > .v5-aside__contact[data-hong-contact-lifted]  { order: 3; margin-bottom: 28px; }
  .v5-article .v5-grid > .v5-main             { order: 4; }
  .v5-article .v5-aside > .v5-author--sidebar { order: 5; margin-top: 32px; }
  .v5-article .v5-aside > .v5-aside__facts    { order: 6; margin-top: 24px; }
  .v5-article .v5-aside > .v5-aside__trust    { order: 7; margin-top: 24px; }
  .v5-article .v5-aside > .v5-aside__dnausp   { order: 8; margin-top: 24px; }
}

/* (QW6 removido na auditoria: o "Em resumo" só duplica a ficha em 304 dos 728
   posts — nos outros 424 é conteúdo único. Esconder = perder conteúdo.) */

/* --- QW7 · Alvos de toque ≥ 24px nos chips e crumbs ------------------------ */
.v5-article .v5-txchip { padding: 7px 12px; }
.v5-article .v5-breadcrumb a { display: inline-block; padding: 6px 0; }

/* --- QW8 · Título de sistema como faixa ------------------------------------
   Só nos h3 do kit (.v5-h3): o h3 cru do CTA verde (38 posts aninham
   .v5-cta dentro de .v5-section) não pode ganhar régua de tinta. */
.v5-article .v5-section h3.v5-h3 {
  padding-top: 14px;
  border-top: 1px solid var(--v5-ink);
}

/* --- QW10 · Cartões de condição viram linhas no celular -------------------- */
@media screen and (max-width: 680px) {
  .v5-article .v5-txgrid {
    display: block;
    border-top: 1px solid var(--v5-line);
    margin-top: 14px;
  }
  .v5-article .v5-txcard {
    border: 0;
    border-bottom: 1px solid var(--v5-line);
    background: none;
    padding: 14px 0;
    gap: 6px;
  }
}

/* --- QW11 · Statband 2×2 no celular ----------------------------------------
   minmax(0,1fr) + overflow-wrap:anywhere: valores de uma palavra longa
   ("Miofascial", 24 posts no corpus) não estouram a faixa a 320-340px. */
@media screen and (max-width: 680px) {
  .v5-article .v5-statband {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
    padding: 24px 20px;
  }
  .v5-article .v5-statband__num { overflow-wrap: anywhere; }
}

/* --- QW12 · Cabeça mais enxuta no celular ---------------------------------- */
@media screen and (max-width: 680px) {
  .v5-article .v5-byline { gap: 6px 16px; margin-top: 20px; }
  .v5-article .v5-aside__contact { padding: 22px 20px; }
  .v5-article .v5-h2 { margin-top: 44px; }
}

/* --- QW9 · Impressão -------------------------------------------------------
   Papel nunca herda layout de telefone (blocos acima são screen-qualified) e
   o índice segue oculto no papel. NOTA da auditoria: abrir o FAQ no papel NÃO
   é possível em CSS (details fechado esconde os filhos no UA); o caminho é
   estender o handler beforeprint de v5-layout.js — item da fila "esta semana". */
@media print {
  .v5-article .v5-toc:not(.v5-toc--inline) { display: none; }
  .v5-article .v5-aside { position: static; max-height: none; overflow: visible; }
  body.v5-post:not(:has(.v5-progress))::before { display: none; }
}

/* --- QW13 · Trilha de chips fixa + seção atual (com v5-quickwins.js) -------
   position:sticky é só CSS; o JS marca aria-current e centraliza o chip.
   Sem JS: trilha fixa sem destaque — degradação limpa. */
/* .site-container{overflow:hidden} vira scrollport e mata QUALQUER sticky
   descendente — a trilha de chips no celular E o aside no desktop (sem isto,
   o QW4 clampava um aside que nunca gruda e o contato ficava atrás de uma
   barra de rolagem invisível). clip contém overflow igual, sem scrollport. */
body.v5-post .site-container { overflow: clip; }

@media screen and (max-width: 900px) {
  .v5-article .v5-toc:not(.v5-toc--inline) {
    position: sticky;
    top: 0;
    z-index: 55;
    background: var(--v5-surface);
    border-bottom: 1px solid var(--v5-line);
    padding-top: 8px;
    padding-bottom: 6px;
  }
  /* âncoras param abaixo da trilha fixa (~122px), não atrás dela */
  .v5-article .v5-section { scroll-margin-top: 132px; }
  /* barra de admin do WP cobre o topo da trilha para editores logados */
  body.admin-bar .v5-article .v5-toc:not(.v5-toc--inline) { top: 46px; }
  .v5-article .v5-toc:not(.v5-toc--inline) a[aria-current="true"] {
    border-color: var(--v5-accent-deep);
    background: oklch(97% 0.015 28);
  }
  .v5-article .v5-toc:not(.v5-toc--inline) a[aria-current="true"] span {
    color: var(--v5-accent-deep);
    font-weight: 600;
  }
}

/* --- QW14 · Base do estudo sob cada barra de evidência --------------------- */
.v5-article .v5-evbar__base {
  display: block;
  font-family: var(--v5-mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--v5-text-2);
  margin-top: 2px;
}

/* --- QW15 · Dobra real do "Em resumo" + ordem do contato -------------------
   O servidor move o cartão de contato para o topo do aside (ordem de teclado
   = ordem visual no celular); no desktop e tablet o CSS devolve o cartão ao
   pé da trilha. O <details> do resumo abre por padrão (sem JS = tudo
   visível); o JS fecha só em telefone. */
@media screen and (min-width: 681px) {
  .v5-article .v5-aside > .v5-aside__contact[data-hong-contact-lifted] { order: 99; }
}
.v5-article .v5-facts-fold > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--v5-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v5-accent-deep);
  padding: 6px 0;
  min-height: 24px;
}
.v5-article .v5-facts-fold > summary::-webkit-details-marker { display: none; }
@media screen and (min-width: 681px) {
  .v5-article .v5-facts-fold > summary { display: none; }
}
@media print {
  .v5-article .v5-facts-fold > summary { display: none; }
}