/* What only the tool pages need beyond base.css: a choice of a few options, two fields side by side,
   and the grouped list on the tools hub. Sizes and colours come from base.css's roles and tokens. */

/* A choice of a few options (call or put, long or short): radios drawn as one pill. */
.tool-fieldset { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.tool-fieldset:last-child { margin-bottom: 0; }
.tool-fieldset legend { float: none; width: auto; margin: 0 0 6px; padding: 0; color: var(--heading); font-size: 0.9375rem; font-weight: 500; line-height: 1.6; }
.tool-choice { position: relative; display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--edge); border-radius: 24px; background: var(--page); }
.tool-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tool-choice label { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 4px 12px; border-radius: 20px; color: var(--text); font-size: 0.9375rem; font-weight: 500; line-height: 1.2; text-align: center; white-space: nowrap; transition: background-color 150ms var(--change), color 150ms var(--change); }
.tool-choice label:hover { background: var(--hairline); color: var(--heading); }
.tool-choice input:checked + label { background: var(--accent-fill); color: var(--accent-ink); font-weight: 600; }
.tool-choice input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Two short fields side by side, in the inputs panel. */
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.field-pair:last-child { margin-bottom: 0; }
.field-pair .field { margin-bottom: 0; }
.field-pair .form-label { display: block; }

/* Black-Scholes and implied volatility: the five Greeks on one line where they fit, not four and one left over. */
@media (min-width: 1200px) { .stats--five { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Stock profit (any tool with a table in its results): on a phone .tool's one column is auto, so a wide table would widen the page instead of scrolling in its .table-wrap. */
.tool > .panel { min-width: 0; }

/* The tools hub. */
.tool-groups { gap: 0 64px; }
.tool-group { margin-bottom: 48px; }
.tool-group h2 { margin-bottom: 12px; }