/* Emergency fund (tools/emergency-fund.html). Frame: tool-frame.css + tools/kit.css. */

/* Hero panel: the gauge, then the target */
.ef-summary { padding-top: 28px; }
.ef-gauge { position: relative; max-width: 440px; margin: 0 auto; }
.ef-gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.ef-g-track { fill: none; stroke: rgba(236, 230, 216, .12); stroke-width: 18; stroke-linecap: round; }
.ef-g-fill { fill: none; stroke: var(--kesef); stroke-width: 18; stroke-linecap: round; stroke-dasharray: 1000 1000; transition: stroke-dashoffset 1s cubic-bezier(.215, .61, .355, 1); }
.ef-g-fill.no-anim { transition: none; }
.ef-g-dot { fill: var(--stage); stroke: var(--kesef); stroke-width: 3; transition: opacity .3s var(--ease); }
.ef-g-tick { stroke: var(--parchment-dim); stroke-width: 1.5; stroke-linecap: round; }
.ef-g-num { fill: var(--parchment-2); font: 400 15px var(--font-mono); font-variant-numeric: tabular-nums; }
.ef-g-num.is-target { fill: var(--parchment); }
.ef-dial { position: relative; }
.ef-runway { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; margin: 0; font: 300 clamp(64px, 7.4vw, 104px)/.9 var(--font-sans); letter-spacing: -0.045em; color: var(--parchment); font-variant-numeric: tabular-nums; }
.ef-runway-label { text-align: center; margin: 14px 0 0; font: 400 14px/1.3 var(--font-sans); color: var(--parchment-2); }
.ef-target-row { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hair-stage); }
.ef-hero .tf-figure { font-size: clamp(52px, 5.6vw, 80px); letter-spacing: -0.04em; margin-top: 10px; }
.ef-hero .tf-subs { margin-top: 20px; padding-top: 0; border-top: 0; }
.ef-hero .tf-sub { font-size: clamp(22px, 2vw, 28px); }
@media (max-width: 760px) { .ef-runway { font-size: clamp(56px, 17vw, 88px); } .ef-hero .tf-figure { font-size: clamp(52px, 15vw, 80px); } }
@media (prefers-reduced-motion: reduce) { .ef-g-fill, .ef-g-dot { transition: none; } }

/* Work area */
.ef-intro { font: 400 15px/1.55 var(--font-sans); color: var(--ink-2); margin: -12px 0 24px; max-width: 40em; }
.ef-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.ef-grid .tk-field { margin-top: 0; align-content: start; }
.ef-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--hair); font: 500 15px/1.3 var(--font-sans); color: var(--ink); }
.ef-sum .tnum { font: 300 30px/1 var(--font-sans); letter-spacing: -0.02em; }
@media (max-width: 520px) { .ef-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

.tf-work .ef-seg { display: flex; width: 100%; max-width: 460px; }
.tf-work .ef-seg button { flex: 1 1 0; min-height: 44px; padding: 0 10px; }
.ef-stepper { display: grid; grid-template-columns: 48px minmax(0, 160px) 48px; gap: 8px; align-items: center; }
.tf-work .ef-step { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--hair-strong); border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink); font: 300 22px/1 var(--font-sans); cursor: pointer; }
.tf-work .ef-step:hover { border-color: var(--ink); }
.tf-work .ef-step:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ef-stepper .tk-affix input { text-align: center; }
.tk-note strong { color: var(--ink); font-weight: 500; }
.ef-status:empty { display: none; }
.ef-status { margin-top: 12px; }
.ef-hero .tf-subs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 340px) and (max-width: 520px) {
  .ef-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .ef-grid .tk-affix span:last-child:not(:first-child) { display: none; }
}
.emergency-fund-page .tk-two .tk-field { align-content: start; }