/* Calculator on demand (scripts/lib/components/calculator.mjs). The idle state is the red
   button and a status line; the loaded calculator keeps the embed's own styles in
   styles.css (.talent-calculator-embed). */

/* On demand the section sits in the template's own column, not the full-width embed band. */
.wfg-calc.talent-calculator-embed { width: auto; margin-inline: 0; padding-block: 0; }
.wfg-calc-idle { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.wfg-calc-idle[hidden] { display: none; }
.wfg-calc-status { margin: 0; font: 400 .9rem/1.4 var(--font-ui); color: var(--ink-2); }
.wfg-calc-status:empty { display: none; }
.wfg-calc[data-calc-state="error"] .wfg-calc-status { color: var(--ink); }
/* The loader's :host rule sets display: block, which beats the browser's own [hidden] rule, so
   a hidden host (idle, error) needs a page rule to stay hidden. */
.wfg-calc [data-talent-calculator][hidden] { display: none; }
.wfg-calc [data-talent-calculator]:focus { outline: none; }
.wfg-calc [data-talent-calculator]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The view switch for a calculator that replaces an element (calculatorMount replaces). */
.wfg-calc-swap { margin-block: 0 .75rem; }
.wfg-calc-swap[hidden] { display: none; }
.wfg-calc-nojs { margin: 0; font: 400 .9rem/1.4 var(--font-ui); color: var(--ink-2); }
/* The error state's retry: a text button inside the status line, 28px tall like a link. */
.wfg-calc-retry { min-height: 1.75rem; padding: 0 .1rem; border: 0; background: none; font: inherit; color: var(--accent-text); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.wfg-calc-retry:hover { color: var(--ink); }