/* Public /calculators pages in the hub calculators look (Joe 2026-10-20): a "Calculator" dropdown
   instead of the tab grid, lighter text, see-through panels and the Oddsmatcher-style inputs.
   Mirrors the #hub-calc block in hub/calculators/index.html, scoped to the public pages' main. */
/* Same width as the hub card (860px + 20px gutters). Plain .tools-main on purpose: it beats tools.css's
   688px, while the Acca and Each-way pages' own inline 1040px still wins over it. */
.tools-main { max-width: 900px; }
#main-content.tools-main { --ink: #FFFFFF; --muted: #B6C2D0; --dim: #8C99AB; --line: rgba(255, 255, 255, 0.08); }
#main-content.tools-main .tools-nav { display: none; }
#main-content.tools-main .calc-picker { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; }
#main-content.tools-main .calc-picker-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
#main-content.tools-main .calc-picker-select, #main-content.tools-main .calc-toolbar select {
  height: 38px; width: 100%; max-width: 280px; padding: 0 34px 0 12px;
  background: rgba(255, 255, 255, 0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B6C2D0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center / 14px;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px;
  color: #FFFFFF; font: 500 13.5px 'Inter', sans-serif; appearance: none; -webkit-appearance: none; cursor: pointer;
}
#main-content.tools-main .calc-toolbar select { height: 32px; width: auto; max-width: none; font-size: 13px; padding-right: 30px; background-position: right 10px center; }
#main-content.tools-main .calc-picker-select:hover, #main-content.tools-main .calc-toolbar select:hover { border-color: rgba(255, 255, 255, 0.16); }
#main-content.tools-main .calc-picker-select option, #main-content.tools-main .calc-toolbar select option { background: #0A0E15; color: #FFFFFF; }
#main-content.tools-main .calc-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: none; }
#main-content.tools-main .calc-toolbar { min-height: 52px; padding: 10px 20px; background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
#main-content.tools-main .calc-toolbar h2 { font-size: 13.5px !important; color: #FFFFFF !important; }
#main-content.tools-main .calc-control-label { font-size: 11px; color: var(--muted); }
#main-content.tools-main .calc-help-button { font-size: 12.5px; }
#main-content.tools-main .calc-help-button { color: var(--muted); }
#main-content.tools-main .calc-inputs { padding: 22px 20px 8px; }
#main-content.tools-main .calc-field > span { font-size: 12.5px; color: #E2E8F0; }
#main-content.tools-main .calc-field input { height: 42px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; color: #FFFFFF; }
#main-content.tools-main .calc-result { background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.06); }
#main-content.tools-main .calc-metric span, #main-content.tools-main .breakdown-row span { color: var(--muted); }
#main-content.tools-main .calc-clear, #main-content.tools-main .calc-copy { color: var(--muted); }