/* page-tools.css — two small calculators. */

.opener .opener__row { align-items: center; }
.opener__aside { aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
.opener .display { max-width: 9ch; }
.tools__noscript { margin-top: 2rem; }

.tool-a, .tool-b, .tools-close { padding-block: clamp(4.5rem, 9vw, 8rem); }
.tool-a__grid, .tool-b__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; align-items: start; }
.tool-a__text { grid-column: 1 / span 5; }
.tool-a__text .lead, .tool-b__text .lead { margin-top: 1.25rem; }
.tool-a__form { grid-column: 7 / span 6; display: grid; gap: 0.5rem; }
.tool-a__form .money { max-width: 22rem; }
.tool-a__form .fc-mini:not(:first-child) { margin-top: 1rem; }
.runway { display: grid; gap: 0.75rem; margin-top: 2rem; padding: 1.5rem; background: #fff; color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.runway__n { font-family: var(--font-display); font-weight: 800; font-size: var(--step-head); line-height: 1; letter-spacing: -0.035em; color: var(--evergreen); }
.runway__track { height: 14px; background: var(--paper-2); overflow: hidden; border-radius: 999px; }
.runway__fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; transform-origin: left; transition: transform 240ms var(--ease-out); }
.tool-a__form .note { margin-top: 1rem; max-width: 52ch; }

.tool-b__text { grid-column: 1 / span 5; }
.tool-b__form { grid-column: 1 / span 5; display: grid; gap: 1.5rem; }
.tool-b__form .input { background: var(--paper); }
.kids { border: 0; margin: 0; padding: 0; }
.kids__list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.kid { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; padding-left: 1rem; background: #fff; color: var(--ink); font-weight: 700; border-radius: 999px; }
.kid__x { border-radius: 999px; }
.kid__x { min-width: 2.75rem; min-height: 2.75rem; display: grid; place-items: center; }
.kid__icon { width: 0.9rem; height: 0.9rem; background: currentColor; -webkit-mask: var(--i-cross) center / contain no-repeat; mask: var(--i-cross) center / contain no-repeat; }
@media (hover: hover) and (pointer: fine) { .kid__x:hover { background: var(--sage); } }
.kids__add { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.kids__add .input { width: 5.5rem; }
.tool-b .btn { --btn-bg: var(--paper); --btn-fg: var(--ink); }
.assume { display: grid; gap: 0.5rem; }
.assume .money { max-width: 18rem; }
.pct { display: flex; align-items: center; gap: 0.5rem; max-width: 9rem; }
.years { grid-column: 7 / span 6; grid-row: 1 / span 2; margin: 0; align-self: stretch; display: flex; flex-direction: column; }
.years__chart { flex: 1; min-height: 22rem; display: flex; align-items: flex-end; gap: 6px; padding-top: 2rem; }
.yr { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 0.4rem; }
.yr__bar { display: block; height: calc(var(--h) * 82%); min-height: 4px; background: var(--brass); transform-origin: bottom; border-radius: 8px 8px 3px 3px; }
.yr__amt { font-size: var(--step-small); text-align: center; white-space: nowrap; }
.yr__label { font-size: var(--step-small); text-align: center; opacity: 0.82; }
@media (prefers-reduced-motion: no-preference) {
  .yr__bar { animation: grow 600ms var(--ease-out) both; animation-delay: calc(var(--i) * 40ms); }
}
@keyframes grow { from { transform: scaleY(0); } to { transform: none; } }
.years figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 2px solid currentColor; }
.years__total { font-family: var(--font-display); font-size: var(--step-lead); }
.tools-close__in { display: grid; gap: 1.5rem; justify-items: start; }

@media (max-width: 60rem) {
  .tool-a__text, .tool-a__form, .tool-b__text, .tool-b__form, .years { grid-column: 1 / -1; grid-row: auto; }
  .years__chart { min-height: 16rem; }
  .yr__amt { writing-mode: vertical-rl; transform: rotate(180deg); margin-inline: auto; }
}