/* Bike Fit Lab — tools.css: calculadoras de /calculadoras (CONTRACT-v6, agente FERRAMENTAS).
   Reutiliza .form__row, .field, .button e .nums de site.css; aqui só o que é da ferramenta: a caixa do formulário,
   a grelha de inputs, o bloco de resultado, as tabelas de exemplos, a lista de verificação e as mini-figuras.
   Sem gradientes, sem sombras, cantos retos. Tudo legível sem JS (fórmula + tabela); o JS só acrescenta o resultado. */

/* ---------- índice no topo ---------- */
.tool__index { margin-top: 1.75rem; }
.tool__toc { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.35rem 1.5rem; font-size: var(--step-small); }
.tool__toc a { display: inline-flex; align-items: baseline; gap: 0.6rem; min-height: 2.25rem; text-decoration: none; color: var(--ink); }
.tool__toc a .nums { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; background: var(--surface); font-weight: 600; font-size: 0.8125rem; }
@media (hover: hover) and (pointer: fine) { .tool__toc a:hover { color: var(--accent); } .tool__toc a:hover .nums { background: var(--accent); color: var(--accent-ink); } }
.page--tools .page__text > h2 .tool__num { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; margin-right: 0.3em; background: var(--accent); color: var(--accent-ink); font-size: 0.42em; font-weight: 600; letter-spacing: 0; vertical-align: 0.42em; }
.page--tools .page__text > h3 { margin-top: 1.75rem; font-size: var(--step-body); font-weight: 600; letter-spacing: 0; }
.page--tools .page__text > h3 + p { margin-top: 0.5rem; }
.tool__ref { color: var(--accent); text-decoration: none; font-size: 0.8em; font-weight: 600; white-space: nowrap; }
.tool__ref:hover { text-decoration: underline; text-underline-offset: 0.15em; }

/* ---------- a ferramenta ---------- */
.tool { display: grid; gap: 1.25rem; padding: 1.5rem; background: var(--surface); color: var(--ink); }
.page--cols .page__figs > .tool { max-width: 40rem; }
.page__figs > .tool + .fig { margin-top: 2.5rem; }
.tool .field { background: var(--bg); }
.tool .field:focus { background: var(--bg); }
.tool .tool__row > span { font-weight: 600; font-size: var(--step-small); line-height: 1.35; }
.tool .tool__row > span small { font-weight: 400; font-size: 1em; }
.tool__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem 1.25rem; align-items: end; }
.tool__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool__frame { display: grid; gap: 0.75rem; padding-top: 0.5rem; }
.tool__frame legend { font-size: var(--step-body); }
.tool__frame + .tool__frame { padding-top: 0.75rem; }
.tool__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.tool__actions .button { min-height: 2.75rem; padding: 0 1.25rem; font-size: var(--step-small); }
.tool__formula { max-width: none; }
.tool__formula b { font-weight: 600; }

/* resultado: bloco em tinta, para que o número se leia de longe */
.tool__result { display: grid; gap: 0.75rem; padding: 1.25rem 1.5rem; background: var(--ink); color: var(--bg); }
.tool__result[hidden] { display: none; }
.tool__line { display: grid; grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr); gap: 0.25rem 1.25rem; align-items: baseline; max-width: none; margin: 0; }
.tool__line[hidden] { display: none; }
.tool__line .tool__k { font-size: var(--step-small); font-weight: 600; opacity: 0.8; }
.tool__line output { display: block; min-width: 0; overflow-wrap: anywhere; }
.tool__line--main { padding-bottom: 0.5rem; }
.tool__line--main output { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.01em; }
.tool__line--main output b { font-weight: 400; }
.tool__line--main output .nums { font-weight: 600; }
.tool__line--text output { font-size: var(--step-body); line-height: 1.45; }
.tool__line--text output b { font-weight: 600; }
.tool__result .muted { color: inherit; opacity: 0.7; }
.tool__note { margin-top: 0.25rem; max-width: none; opacity: 0.8; }
.tool__rules { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.tool__rule { display: block; padding-left: 0.9rem; font-size: var(--step-small); line-height: 1.45; position: relative; }
.tool__rule::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.4rem; height: 0.4rem; background: var(--accent); }
.tool__result .tool__ref { color: inherit; opacity: 0.75; }

/* exemplos: tabela sempre visível sem JS; com JS o título é um botão que a abre e fecha */
.tool__examples-h { font-weight: 600; font-size: var(--step-small); max-width: none; }
.tool__toggle { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; font-weight: 600; font-size: var(--step-small); color: inherit; text-align: left; }
.tool__toggle::before { content: ""; flex: none; width: 0.6rem; height: 0.6rem; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: transform var(--t-ui) var(--ease-out); }
.tool__examples.is-open .tool__toggle::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .tool__toggle::before { transition: none; } }
@media (hover: hover) and (pointer: fine) { .tool__toggle:hover { color: var(--accent); } .tool__toggle:hover::before { background: var(--accent); } }
.tool__examples-body[hidden] { display: none; }
.tool__examples-body { margin-top: 0.5rem; }
.tool__examples-body > p { margin-top: 0.75rem; max-width: none; }
.tool__table { margin-top: 0.25rem; font-size: var(--step-small); line-height: 1.4; }
.tool__table th, .tool__table td { padding: 0.5rem 0.6rem; text-align: left; vertical-align: top; }
.tool__table thead th { font-weight: 600; }
.tool__table tbody th { font-weight: 400; }
.tool__table td.nums, .tool__table th.nums { text-align: right; white-space: nowrap; }
.tool__table thead th:not(:first-child) { text-align: right; }
.tool__table tbody tr:nth-child(odd) { background: var(--bg); }
.tool__table--text thead th:not(:first-child), .tool__table--text td { text-align: left; }
.tool__table--text tbody th { font-weight: 600; width: 38%; }
.tool__table--text td { font-size: var(--step-small); }

/* caixa UCI: papel dentro da ferramenta */
.tool__uci { padding: 1rem 1.25rem 1.1rem; background: var(--bg); }
.tool__uci-h { font-size: var(--step-body); font-weight: 600; letter-spacing: 0; }
.tool__uci ul { margin-top: 0.6rem; padding-left: 1.1em; list-style: square; display: grid; gap: 0.35rem; }

/* lista de verificação: linhas em papel com um quadrado que enche */
.tool__checks { display: grid; gap: 0.5rem; }
.tool__checks legend { margin-bottom: 0.75rem; font-size: var(--step-body); }
.tool__q { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.85rem; align-items: start; min-height: 2.75rem; padding: 0.65rem 0.9rem; background: var(--bg); cursor: pointer; line-height: 1.4; transition: background-color var(--t-hover) ease; }
.tool__q input { position: absolute; left: 0.9rem; top: 0.7rem; width: 1.5rem; height: 1.5rem; margin: 0; opacity: 0; cursor: pointer; }
.tool__q .tool__box { position: relative; width: 1.5rem; height: 1.5rem; margin-top: 0.05rem; border: 2px solid var(--ink); background: var(--bg); transition: background-color var(--t-press) ease, border-color var(--t-press) ease; }
.tool__q input:checked ~ .tool__box { background: var(--accent); border-color: var(--accent); }
.tool__q input:checked ~ .tool__box::after { content: ""; position: absolute; inset: 5px; background: var(--accent-ink); }
.tool__q input:focus-visible ~ .tool__box { outline: 3px solid var(--accent); outline-offset: 3px; }
.tool__q:has(input:checked) { background: var(--bg); }
@media (hover: hover) and (pointer: fine) { .tool__q:hover .tool__box { border-color: var(--accent); } }

/* fontes */
.tool__sources { display: grid; gap: 0.6rem; font-size: var(--step-small); line-height: 1.45; }
.tool__sources li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.5rem; }
.tool__sources li:target { background: var(--surface); margin-inline: -0.5rem; padding: 0.4rem 0.5rem; }
.tool__srcn { font-weight: 600; }
.tool__sources a { overflow-wrap: anywhere; }
#fontes .page__text code { font-family: inherit; font-size: 0.95em; background: var(--surface); padding: 0 0.3em; }

/* fotografias na coluna da ferramenta */
.fig--photo img, .fig--photo picture { width: 100%; }
.fig--photo picture img { aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- mini-figuras a traço ---------- */
.fig--tool svg { max-width: 34rem; }
.fig--tool .t-line { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.fig--tool .t-thick { stroke-width: 4; }
.fig--tool .t-soft { opacity: 0.4; }
.fig--tool .t-head { fill: var(--paper); }
.fig--tool .t-acc { fill: none; stroke: var(--fg2); stroke-width: 2.5; stroke-linecap: square; stroke-linejoin: miter; }
.fig--tool .t-accfill { fill: var(--fg2); fill-opacity: 0.18; }
.fig--tool .t-dim { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-linecap: square; opacity: 0.7; }
.fig--tool .t-dash { stroke-dasharray: 4 4; }
.fig--tool .t-dot { fill: var(--fg); stroke: none; }
.fig--tool .t-dot2 { fill: var(--fg2); }
.fig--tool .t-text { font-family: var(--font); font-size: 13px; fill: var(--fg); }
.fig--tool .t-big { font-size: 18px; font-weight: 600; }
.fig--tool .t-small { font-size: 11px; opacity: 0.8; }

/* ---------- telemóvel ---------- */
@media (max-width: 40em) {
  .tool { padding: 1.25rem 1rem; }
  .tool__grid, .tool__grid--3 { grid-template-columns: minmax(0, 1fr); }
  .tool__line { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .tool__result { padding: 1.1rem 1rem; }
  .tool__table th, .tool__table td { padding: 0.45rem 0.4rem; }
  .tool__table--text tbody th { width: 40%; }
  .tool__sources li { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .tool__toc { grid-template-columns: minmax(0, 1fr); }
}