/* Bike Fit Lab — symptoms.css · página /sintomas: mapa do corpo (fig-corpo-mapa), fichas por região, regras de bolso,
   passos da sessão, fontes. Só variáveis do site e, dentro de .fig, só --fg --fg2 --fg2-ink --soft --paper. */

/* ===== Cabeça ===== */
/* O h1 fica fora de .page__head-text: em ≥ 64em atravessa as duas colunas numa linha só (na coluna de 34rem partia em
   três); por baixo, lead e aviso à esquerda, filtros e figura à direita. Abaixo de 64em é a ordem natural do DOM. */
.symptoms__h1 { max-width: 16ch; }
.symptoms__head > .page__head-text > .lead { margin-top: 1.5rem; }

/* ===== Aviso ===== */
.symptoms__notice { margin-top: 1.5rem; padding: 0.7rem 1rem; background: var(--surface); border-left: 3px solid var(--accent); font-weight: 600; max-width: 40ch; }
.symptoms__notice--small { font-weight: 400; font-size: var(--step-small); line-height: 1.45; }
.symptoms__evidence { max-width: 46ch; }
.symptoms__cite a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }

/* ===== Cabeça: h1 + lead à esquerda, figura à direita ===== */
.symptoms__head > .page__figs { margin-top: 2.5rem; min-width: 0; }
.symptoms__filters { display: none; }
.js .symptoms__filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.symptoms__filter .nums { font-weight: 400; margin-left: 0.4rem; }
.symptoms__filter[aria-pressed="true"] .nums { color: inherit; opacity: 0.8; }

/* ===== Fotografias entre o mapa e as fichas ===== */
.symptoms__gallery { margin-top: 3rem; }
@media (min-width: 64em) { .page--cols .symptoms__gallery { margin-top: 5rem; } }

/* ===== Figura: três vistas (perfil grande; frente e costas mais pequenas) ===== */
/* viewBoxes: perfil 400×330, frente e costas 480×920. Em ≥ 48em o perfil ocupa a largura toda e frente/costas ficam lado a
   lado por baixo; em telemóvel empilham, limitadas a 72% da largura para a figura não ficar gigante. Os tamanhos dos
   quadrados, pontos e alvos de toque são atributos no partial (por vista); aqui só cores, pesos e transições. */
.fig--corpo-mapa { margin-top: 0; }
.fig--corpo-mapa .fig__views { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; justify-items: start; }
.fig--corpo-mapa .fig__view--lado { width: 100%; }
.fig--corpo-mapa .fig__view--frente, .fig--corpo-mapa .fig__view--costas { width: 72%; max-width: 18rem; }
@media (min-width: 48em) {
  .fig--corpo-mapa .fig__views { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.5rem; row-gap: 1rem; }
  .fig--corpo-mapa .fig__view--lado { grid-column: 1 / -1; }
  .fig--corpo-mapa .fig__view--frente, .fig--corpo-mapa .fig__view--costas { width: 100%; max-width: 14rem; justify-self: center; }
  /* a lista em duas colunas a partir de 48em (figures.css só o faz em ≥ 64em dentro de .page__figs) */
  .fig--corpo-mapa > .fig__points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 0; }
  .fig--corpo-mapa .fig__points li.is-first { margin-top: 0; }
  .fig--corpo-mapa .fig__points .fig__grp { display: none; }          /* em duas colunas o rótulo de grupo desalinhava as linhas; os chips e a numeração chegam */
}
/* silhuetas (_body.php): contornos fechados com preenchimento --paper para se taparem; linhas interiores mais leves */
.fig--corpo-mapa .f-silh { fill: var(--paper); stroke: var(--fg); stroke-width: 2.5; stroke-linecap: square; stroke-linejoin: miter; }
.fig--corpo-mapa .f-silh--far { opacity: 0.35; }
.fig--corpo-mapa .f-bike .f-far { opacity: 0.5; }
.fig--corpo-mapa .f-bike .f-rim { opacity: 0.5; }
.fig--corpo-mapa .f-line { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: square; opacity: 0.5; }
.fig--corpo-mapa .f-silh--front .f-outline, .fig--corpo-mapa .f-silh--back .f-outline { fill: none; stroke: var(--fg); stroke-width: 4; stroke-linecap: square; stroke-linejoin: miter; }
.fig--corpo-mapa .f-silh--front .f-line, .fig--corpo-mapa .f-silh--back .f-line { stroke-width: 3; opacity: 0.5; }
/* pontos, linhas de chamada e quadrados numerados */
.fig--corpo-mapa .f-lead { stroke: var(--fg2); stroke-width: 1.5; stroke-linecap: square; opacity: 0.7; }
.fig--corpo-mapa .fig__view--frente .f-lead, .fig--corpo-mapa .fig__view--costas .f-lead { stroke-width: 3; }
.fig--corpo-mapa .f-hot__dot { transition: r var(--t-ui) ease; }
.fig--corpo-mapa .fig__view--frente .f-hot__dot, .fig--corpo-mapa .fig__view--costas .f-hot__dot { stroke-width: 5; }
.fig--corpo-mapa .f-tag rect { fill: var(--fg2); transition: fill var(--t-ui) ease; }
.fig--corpo-mapa .f-tag text { fill: var(--fg2-ink); font-weight: 600; font-size: 13px; pointer-events: none; }
.fig--corpo-mapa .fig__view--frente .f-tag text, .fig--corpo-mapa .fig__view--costas .f-tag text { font-size: 27px; }
.fig--corpo-mapa .f-hot { transition: opacity var(--t-ui) ease; }
.fig--corpo-mapa .f-hot:hover .f-tag rect, .fig--corpo-mapa .f-hot.is-hover .f-tag rect, .fig--corpo-mapa .f-hot.is-active .f-tag rect { fill: var(--fg); }
.fig--corpo-mapa .fig__view--lado .f-hot.is-hover .f-hot__dot, .fig--corpo-mapa .fig__view--lado .f-hot.is-active .f-hot__dot { r: 6.5; }
.fig--corpo-mapa .fig__view--frente .f-hot.is-hover .f-hot__dot, .fig--corpo-mapa .fig__view--frente .f-hot.is-active .f-hot__dot,
.fig--corpo-mapa .fig__view--costas .f-hot.is-hover .f-hot__dot, .fig--corpo-mapa .fig__view--costas .f-hot.is-active .f-hot__dot { r: 13; }
.fig--corpo-mapa .f-hot.is-active .f-lead { opacity: 1; stroke: var(--fg); }
.fig--corpo-mapa .f-hot:focus-visible .f-tag rect { stroke: var(--fg); stroke-width: 2.5; }
.fig--corpo-mapa .f-hot:focus-visible .f-hot__dot { stroke: var(--fg2); stroke-width: 4; }
.fig--corpo-mapa.has-active .f-hot:not(.is-active):not(.is-hover) { opacity: 0.5; }
.fig--corpo-mapa .f-hot.is-dim:not(.is-active):not(.is-hover) { opacity: 0.22; }
.fig--corpo-mapa .fig__points li.is-dim:not(.is-active):not(.is-hover) { opacity: 0.4; }

/* ===== Lista das regiões (sobrepõe a grelha genérica de figures.css: aqui há h3 + p, e o número vem de data-n) ===== */
.fig--corpo-mapa .fig__points { margin-top: 0.5rem; }
.fig--corpo-mapa .fig__points li { grid-template-columns: 1.4rem minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: 0; column-gap: 0.65rem; padding: 0.5rem 0.65rem 0.6rem 0.5rem; }
.fig--corpo-mapa .fig__points li::before { content: attr(data-n); grid-row: 2; margin-top: 0.1rem; }
.fig--corpo-mapa .fig__points li.is-first { margin-top: 0.75rem; }
.fig--corpo-mapa .fig__points li:first-child { margin-top: 0; }
.fig--corpo-mapa .fig__points .fig__grp { grid-column: 1 / -1; grid-row: 1; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 0.35rem; }
.fig--corpo-mapa .fig__points h3 { grid-column: 2; grid-row: 2; font-size: var(--step-body); font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.fig--corpo-mapa .fig__points p { grid-column: 2; grid-row: 3; margin: 0.15rem 0 0; max-width: none; font-size: var(--step-small); line-height: 1.45; }
.fig--corpo-mapa .fig__points p .link { white-space: nowrap; }
.fig--corpo-mapa figcaption { max-width: 46ch; }

/* ===== Fichas ===== */
.page .symptoms__list > * + * { margin-top: 0; }
.symptoms__list { margin-inline: calc(-1 * min(1rem, var(--margin))); }
.symptoms__r { padding: 1.25rem min(1rem, var(--margin)) 1.5rem; scroll-margin-top: 5.5rem; border-left: 3px solid transparent; transition: background-color var(--t-ui) ease; }
.symptoms__r:nth-child(odd) { background: var(--surface); }
.symptoms__r-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 0.75rem; font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.01em; }
.symptoms__r-num { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; background: var(--accent); color: var(--accent-ink); font-size: 0.9rem; font-weight: 600; line-height: 1; align-self: center; flex: none; }
.symptoms__r-label { font-weight: 400; }
.symptoms__r-grp { margin-left: auto; font-weight: 600; letter-spacing: 0.02em; }
.symptoms__r-btn { all: unset; display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 0.75rem; width: 100%; font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; }
.symptoms__r-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.symptoms__r-body > * + * { margin-top: 0.75rem; }
.symptoms__r-body { margin-top: 1rem; }
.symptoms__r-short { font-size: var(--step-body); max-width: 40rem; }
.symptoms__r-body h4 { font-size: var(--step-small); font-weight: 600; letter-spacing: 0.02em; color: var(--muted); margin-top: 1.25rem; line-height: 1.3; }
.symptoms__causes { margin: 0; padding-left: 1.5em; display: grid; gap: 0.35rem; max-width: 40rem; }
.symptoms__causes li::marker { font-weight: 600; }
.symptoms__adjusts { gap: 0.3rem; max-width: 40rem; }
.symptoms__alarm { border-left: 3px solid var(--ink); padding-left: 0.9rem; max-width: 40rem; }
.symptoms__r-notice { max-width: 40rem; }
.symptoms__r-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.25rem; margin-top: 1rem; max-width: none; }
.symptoms__all-wrap { margin-top: 1.5rem; }
.symptoms__all-wrap--end { padding: 1.5rem min(1rem, var(--margin)) 0; }
.symptoms__all[hidden] { display: none; }

/* modo filtrado (JS): a ficha corrente aberta, as outras só com o título */
.js .symptoms--filtered .symptoms__r:not(.is-current) { padding-top: 0.65rem; padding-bottom: 0.7rem; background: none; }
.js .symptoms--filtered .symptoms__r:not(.is-current) .symptoms__r-body { display: none; }
.js .symptoms--filtered .symptoms__r:not(.is-current) .symptoms__r-title { font-size: var(--step-body); }
.js .symptoms--filtered .symptoms__r:not(.is-current) .symptoms__r-num { width: 1.4rem; height: 1.4rem; font-size: 0.8125rem; background: var(--ink); }
.js .symptoms__r.is-current { background: var(--surface); border-left-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .js .symptoms--filtered .symptoms__r:not(.is-current):hover { background: var(--surface); }
}

/* ===== Tabela das regras de bolso ===== */
.table { width: 100%; border-collapse: collapse; margin-inline: calc(-1 * min(1rem, var(--margin))); width: calc(100% + 2 * min(1rem, var(--margin))); }
.table th, .table td { text-align: left; vertical-align: top; padding: 0.75rem min(1rem, var(--margin)); line-height: 1.45; }
.table thead th { font-size: var(--step-small); color: var(--muted); font-weight: 600; letter-spacing: 0.02em; padding-top: 0; }
.table tbody tr:nth-child(odd) { background: var(--surface); }
.table tbody th { font-weight: 600; width: 36%; }
.table td a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .table td a:hover { text-decoration-color: currentColor; color: var(--accent); } }
@media (max-width: 40em) {
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .table tbody th, .table tbody td { display: block; width: auto; }
  .table tbody th { padding-bottom: 0.15rem; }
  .table tbody td { padding-top: 0; }
}

/* ===== O que a sessão faz ===== */
.symptoms__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; max-width: 40rem; }
.symptoms__steps li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.symptoms__steps h3 { font-size: var(--step-lead); line-height: 1.2; }
.symptoms__steps p { margin-top: 0.5rem; max-width: 40rem; }

/* ===== Fontes ===== */
.symptoms__sources { margin: 0; padding-left: 2.4em; display: grid; gap: 0.5rem; max-width: 40rem; overflow-wrap: anywhere; }
.symptoms__sources li::marker { color: var(--muted); }
.symptoms__sources a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
@media (hover: hover) and (pointer: fine) { .symptoms__sources a:hover { text-decoration-color: currentColor; color: var(--accent); } }

/* ===== Grelha ≥ 64em: a cabeça leva a figura na coluna 2; o texto fica sticky como nas secções ===== */
@media (min-width: 64em) {
  .page--cols .symptoms__head { grid-template-rows: auto auto; row-gap: 0; }
  .page--cols .symptoms__head > .symptoms__h1 { grid-column: 1 / -1; grid-row: 1; max-width: none; margin-bottom: 2.5rem; }
  .page--cols .symptoms__head > .page__head-text { grid-column: 1; grid-row: 2; position: sticky; top: 5.5rem; padding-top: 0; }
  .page--cols .symptoms__head > .page__head-text > .lead { margin-top: 0; }
  .page--cols .symptoms__head > .page__figs { grid-column: 2; grid-row: 2; margin-top: 0; }
  .page--cols .symptoms__head > .page__figs > .fig--corpo-mapa { max-width: none; }
  .page--cols .page__figs > .fig--corpo-mapa > .fig__points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 0; }
  .page--cols .symptoms__list, .page--cols .page__figs > .table { max-width: none; }
  .page--cols .page__figs > .symptoms__steps, .page--cols .page__figs > .symptoms__sources { max-width: 40rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fig--corpo-mapa .f-hot, .fig--corpo-mapa .f-hot__dot, .fig--corpo-mapa .f-tag rect, .symptoms__r { transition: none; }
}

/* Integração v6/v7: nas páginas de apoio (coluna das figuras ≥ 64em) o perfil usa a largura toda da coluna e as vistas de
   frente e costas ficam lado a lado por baixo, cada uma a pouco mais de um terço da largura. */
@media (min-width: 64em) {
  .page--cols .page__figs > .fig--corpo-mapa .fig__views { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 2rem; }
  .page--cols .page__figs > .fig--corpo-mapa .fig__view--lado { grid-column: 1 / -1; }
  .page--cols .page__figs > .fig--corpo-mapa .fig__view--frente, .page--cols .page__figs > .fig--corpo-mapa .fig__view--costas { max-width: 19rem; }
}