/* Education Allowance Estimator · brand pass (Spruce & Gold, after the Salary Calculator).
   CSS only, plus one HTML change: the "Quick Explanations" panel starts collapsed so the tool is above the fold.
   Loaded after the tool's own <style>, Choices.js CSS and /tools/_shared/mfp-tools.css. Delete the <link> to revert the look. */
:root {
  --primary-color: var(--mfp-ink); --secondary-color: var(--mfp-ink);
  --light-gray: var(--mfp-paper); --medium-gray: var(--mfp-line); --dark-gray: var(--mfp-muted); --text-color: var(--mfp-text);
  --card-shadow: var(--mfp-shadow); --border-radius: 22px;
}
body { font-family: var(--mfp-body); padding: clamp(1rem, 3.5vw, 3rem); font-size: 16px; }

/* title block */
body > div:first-child { padding-bottom: 1.25rem; border-bottom: 1px solid var(--mfp-line); }
h1, h2 { text-align: left; }
h1 { font-family: var(--mfp-display); font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; color: var(--mfp-text); max-width: 22ch; margin-bottom: 0.75rem; }
#last-updated { text-align: left; margin: 0; font: 500 0.75rem var(--mfp-mono); color: var(--mfp-muted); }
#last-updated:not(:empty) { display: inline-block; background: var(--mfp-surface-2); border-radius: 9999px; padding: 0.3rem 0.85rem; }
.main-container { max-width: 1200px; gap: 1.5rem; margin-top: 1.5rem; }

/* cards */
.card { background: var(--mfp-card); border: 1px solid var(--mfp-line); border-radius: var(--mfp-r-lg); box-shadow: var(--mfp-shadow); padding: clamp(1.25rem, 3vw, 2rem); }
.card.disabled { opacity: 0.55; }
h2 { font-family: var(--mfp-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; color: var(--mfp-text); border-bottom: 1px solid var(--mfp-line); }
h3 { font-family: var(--mfp-display); font-size: 1.05rem; letter-spacing: -0.01em; color: var(--mfp-text); }

/* the explanation panel is a help drawer now: quieter heading, same words */
details.card > summary { min-height: 44px; display: flex; align-items: center; }
details.card > summary h2 { margin: 0; border: 0; padding: 0; font-size: 1.05rem; flex: 1; }
details h2::after { content: '  Show'; font: 600 0.78rem var(--mfp-body); letter-spacing: 0.05em; color: var(--mfp-signal-deep); text-transform: uppercase; margin-left: 0.5rem; }
details[open] h2::after { content: '  Hide'; }
.explanation-item svg { stroke: var(--mfp-ink); }
.explanation-item h4 { font-family: var(--mfp-display); color: var(--mfp-text); font-size: 1rem; }
.explanation-item p { font-size: 0.9rem; color: var(--mfp-muted); }
.tooltip { border-bottom: 1px dotted var(--mfp-ink); }
.tooltip .tooltip-text { background: var(--mfp-text); border-radius: var(--mfp-r-md); }
.tooltip .tooltip-text a { color: var(--mfp-signal); }

/* form */
label { font: 600 0.7rem var(--mfp-body); letter-spacing: 0.09em; text-transform: uppercase; color: var(--mfp-muted); }
select { min-height: 3rem; padding: 0.7rem 0.95rem; border: 1px solid var(--mfp-line); border-radius: var(--mfp-r-sm); background-color: #fff; color: var(--mfp-text); font-family: var(--mfp-body); font-size: 1rem; }
select:not(.choices__input) { appearance: none; -webkit-appearance: none; background-image: var(--mfp-chev); background-repeat: no-repeat; background-position: right 0.95rem center; padding-right: 2.5rem; }
select:focus { outline: none; border-color: var(--mfp-signal); box-shadow: 0 0 0 4px rgba(var(--mfp-signal-rgb), 0.28); }

/* Choices.js dropdowns */
.choices__inner { min-height: 3rem; padding: 0.55rem 0.95rem; border: 1px solid var(--mfp-line); border-radius: var(--mfp-r-sm); background: #fff; font-family: var(--mfp-body); font-size: 1rem; display: flex; align-items: center; }
.choices.is-focused .choices__inner, .choices.is-open .choices__inner { border-color: var(--mfp-signal); box-shadow: 0 0 0 4px rgba(var(--mfp-signal-rgb), 0.28); }
.choices__list--dropdown, .choices__list[aria-expanded] { border: 1px solid var(--mfp-line); border-radius: var(--mfp-r-md); box-shadow: var(--mfp-lift); overflow: hidden; margin-top: 4px; }
.choices__list--dropdown .choices__item--selectable { padding: 0.75rem 1rem; font-size: 0.95rem; }
.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background: var(--mfp-surface-2); color: var(--mfp-ink); }
.choices__input { font-family: var(--mfp-body); }
.choices__placeholder { opacity: 1; color: var(--mfp-hint); }
.choices[data-type*="select-one"]::after { border-color: var(--mfp-muted) transparent transparent; }
.choices[data-type*="select-one"].is-open::after { border-color: transparent transparent var(--mfp-muted); }

/* buttons: ink pills; add = ink, remove = quiet danger, no more Bootstrap blue/green/red */
button { background-color: var(--mfp-ink); color: var(--mfp-on-ink); border-radius: 9999px; min-height: 3rem; font-family: var(--mfp-body); font-size: 0.95rem; font-weight: 600; transition: transform .35s var(--mfp-ease), box-shadow .35s var(--mfp-ease), background-color .25s; }
button:hover { background-color: var(--mfp-ink); transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(var(--mfp-ink-rgb), 0.5); }
button:active { transform: none; box-shadow: none; }
button.add-btn { background-color: var(--mfp-ink); }
button.add-btn:hover { background-color: var(--mfp-ink); }
button.remove-btn { background: transparent; color: var(--mfp-danger); border: 1px solid var(--mfp-line-strong); min-height: 44px; min-width: 44px; padding: 0.4rem 0.9rem; font-size: 0.8rem; width: auto; }
button.remove-btn:hover { background: var(--mfp-danger); color: #fff; border-color: var(--mfp-danger); transform: none; box-shadow: none; }
:focus-visible { outline: 2px solid var(--mfp-signal); outline-offset: 2px; }

/* family list, totals, comparison */
.child-item { background: var(--mfp-surface-2); border-radius: var(--mfp-r-md); padding: 0.85rem 1rem; }
.child-details { font-size: 0.95rem; }
.homeschool-label { color: var(--mfp-signal-deep); font-style: normal; font-weight: 600; }
.total-allowance { font-family: var(--mfp-display); font-size: 2.4rem; font-weight: 600; letter-spacing: -0.04em; color: var(--mfp-ink); font-variant-numeric: tabular-nums; }
.comparison-card { background: var(--mfp-surface-2); border-radius: var(--mfp-r-md); text-align: left; }
.comparison-breakdown { font-size: 0.85rem; border-top-color: var(--mfp-line); }
.footer-note { font-size: 0.8rem; color: var(--mfp-muted); max-width: 62ch; }
@media (max-width: 640px) { select, .choices__inner, .choices__input { font-size: 16px; } .total-allowance { font-size: 2rem; } }

/* alignment: title block shares the 1100px column with the cards; collapsed help drawer is slim; Choices fills its field */
body > div:first-child { max-width: 1200px !important; }
details.card:not([open]) { padding-top: 0.35rem; padding-bottom: 0.35rem; }
details.card > summary h2 { line-height: 1.2; }
.choices { width: 100%; }
.choices__inner { box-sizing: border-box; width: 100%; }