/* Education cost planner (tools/education-calculator.html). Frame: tool-frame.css + tools/kit.css. */

.ed-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ed-panel-head .tf-panel-title { margin-bottom: 0; }
.ed-panel-sub { margin: 10px 0 24px; }
.tk-stack > .tf-panel > .ks-seg { margin-bottom: 4px; }
.ed-presets { margin-top: 24px; }
.ed-assumptions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hair); }
.ed-assumptions .tk-field { margin-top: 0; }
.ed-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 600px) { .ed-assumptions { grid-template-columns: 1fr; } }

/* Tuition per stage */
.stage-table { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hair); }
.ed-stage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.stage-row { display: grid; grid-template-columns: minmax(0, 1fr) 168px; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.stage-row:last-child { border-bottom: 0; }
.stage-title { font: 500 15px/1.3 var(--font-sans); color: var(--ink); margin: 0; }
.stage-subtitle { font: 400 13px/1.4 var(--font-sans); color: var(--ink-2); margin: 2px 0 0; }
@media (max-width: 480px) { .stage-row { grid-template-columns: 1fr; gap: 8px; } }

/* Children (cards are rendered by the tool's script) */
.children-list { display: grid; gap: 12px; margin-top: 24px; }
.child-card { border: 1px solid var(--hair-strong); border-radius: var(--r-chip); background: var(--paper); padding: 18px; }
.child-header { display: flex; align-items: center; gap: 12px; }
.tf-work .child-header input.child-name:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; font: 400 20px/1 var(--font-display); letter-spacing: -0.01em; background: transparent; border-color: transparent; }
.tf-work .child-header input.child-name:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):hover { border-color: var(--hair-strong); }
.tf-work .child-header .icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); cursor: pointer; }
.tf-work .child-header .icon-btn:hover { background: var(--paper-3); color: var(--ink); }
.child-fields { display: grid; grid-template-columns: 140px 1fr; gap: 4px 24px; align-items: center; margin-top: 10px; }
.child-fields .field { grid-row: span 2; display: grid; gap: 6px; }
.child-fields .field small { font: 400 12.5px/1.3 var(--font-sans); color: var(--ink-2); }
.child-fields .input-affix { display: flex; align-items: center; min-height: 44px; border: 1px solid var(--hair-strong); border-radius: var(--r-chip); background: var(--paper-2); }
.child-fields .input-affix:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--kesef-soft); }
.tf-work .child-fields .input-affix input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { flex: 1; min-width: 0; width: 100%; min-height: 44px; border: 0; background: transparent; padding: 0 12px; box-shadow: none; }
.child-fields .input-affix span { padding-right: 12px; color: var(--ink-2); font-size: 14px; }
.tf-work .child-fields label.switch { font-weight: 400; font-size: 14px; color: var(--ink-2); }
@media (max-width: 520px) { .child-fields { grid-template-columns: 1fr; } .child-fields .field { grid-row: auto; } }
.stage-toggle-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hair); }
.stage-toggle-row > .label { width: 100%; font: 500 13px/1.3 var(--font-sans); color: var(--ink-2); margin-bottom: 4px; }
.pill-toggle { position: relative; display: inline-flex; cursor: pointer; }
.pill-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pill-toggle span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--hair-strong); border-radius: var(--r-chip); font: 400 13px/1.2 var(--font-sans); color: var(--ink-2); background: var(--paper-2); transition: background .2s var(--ease), color .2s var(--ease); }
.pill-toggle input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper-2); }
.pill-toggle input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.ed-add { margin-top: 16px; width: 100%; }

/* Summary */
.ed-tag { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--paper-3); font: 500 12.5px/1 var(--font-sans); color: var(--ink-2); white-space: nowrap; }
.ed-total { margin-top: 28px; }
.ed-total .tf-result { margin: 10px 0 6px; }
.ed-horizon { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hair); }
.ed-horizon-row { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 14px; margin-top: 8px; }
.ed-horizon .tk-affix:has(input:disabled) { background: var(--paper-3); }
.ed-horizon .tk-affix:has(input:disabled) input { color: var(--ink-2); }
.ed-whatif { margin-top: 24px; }
.ed-block { margin-top: 28px; }
.ed-block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.stage-breakdown { display: grid; gap: 12px; }
.stage-chip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: baseline; }
.stage-chip .stage-label { font: 400 14px/1.3 var(--font-sans); color: var(--ink-2); }
.stage-chip .stage-value { font: 400 15px/1 var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.stage-chip .bar { grid-column: 1 / -1; grid-row: 2; height: 4px; border-radius: var(--r-pill); background: var(--paper-3); overflow: hidden; }
.stage-chip .bar span { display: block; height: 100%; background: var(--ink); border-radius: var(--r-pill); transition: width .6s var(--ease); }
#child-breakdown .child-row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--hair); }
#child-breakdown .child-row:last-child { border-bottom: 0; }
#child-breakdown .label { font: 400 15px/1.3 var(--font-sans); color: var(--ink); }
#child-breakdown .metric-value { font: 400 17px/1 var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.tk-actions .ed-wide { flex-basis: 100%; }

/* Scenario comparison (cards rendered by the tool's script) */
.ed-compare { background: var(--paper-2); border-top: 1px solid var(--hair); padding: clamp(80px, 10vw, 128px) 0; }
.ed-compare-head { display: grid; gap: 20px; max-width: 760px; margin-bottom: 40px; }
.ed-compare-head .ks-eyebrow { margin: 0; }
.ed-compare .comparison-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .ed-compare .comparison-grid { grid-template-columns: repeat(3, 1fr); } }
.compare-card { padding: clamp(22px, 2.6vw, 32px); border: 1px solid var(--hair); border-radius: var(--r-panel); background: var(--paper); cursor: pointer; transition: border-color .25s var(--ease), background .25s var(--ease); }
.compare-card:hover { border-color: var(--ink); }
.compare-card.active { background: var(--stage); border-color: var(--stage); color: var(--parchment); }
.compare-card .compare-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 24px; }
.compare-card .badge { font: 500 15px/1.3 var(--font-sans); margin: 0; color: inherit; }
.compare-card .small { font: 400 13.5px/1.5 var(--font-sans); color: var(--ink-2); margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.compare-card.active .small { color: var(--parchment-2); }
.compare-card .compare-metric { font: 300 clamp(36px, 3.6vw, 48px)/1 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: 8px 0 16px; }
.summary-card .ed-panel-head { flex-direction: column; gap: 12px; }
.children-list > *, .child-fields > *, .child-header > * { min-width: 0; }
@media (max-width: 520px) { .child-fields { grid-template-columns: minmax(0, 1fr); } }

/* Scenario cards are buttons (keyboard + screen reader); spans stack like the old paragraphs */
.compare-card { display: flex; flex-direction: column; align-items: stretch; width: 100%; text-align: left; font: inherit; color: var(--ink); }
.compare-card .small, .compare-card .compare-metric { display: block; }
.compare-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.compare-card.active:focus-visible { outline-color: var(--kesef); }

/* v3: children first, tuition visible, assumptions in Fine-tune */
.kc-more > summary small { margin-right: auto; }
.ed-more { margin-top: 28px; }
.ed-more .kc-more__body > .tk-field:first-child { margin-top: 4px; }
.summary-card .kc-verdict { margin-top: 24px; }
#planner [data-kc-banner] { margin: 16px 0 0; }
.ed-stages { margin-top: 14px; border-top: 1px solid var(--hair); }
.ed-stages > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; font: 500 14px/1.3 var(--font-sans); color: var(--ink); }
.ed-stages > summary::-webkit-details-marker { display: none; }
.ed-stages > summary small { font-weight: 400; color: var(--ink-3); margin-right: auto; }
.ed-stages > summary::after { content: ""; width: 10px; height: 10px; flex: none; opacity: .7; transition: transform .3s var(--ease-out); background: linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat; }
.ed-stages[open] > summary::after { transform: rotate(45deg); }
.ed-stages .stage-toggle-row { border-top: 0; padding-top: 0; margin-top: 0; }