/* Cushion free tools: calculator styles. Loaded after tools/blog.css (a copy of the
   blog's stylesheet), so the nav, footer, post cards and tokens match the blog.

   One rule per kind of thing, so every tool looks like one piece:
   - layout is flat: a full-width band for the calculator, thin dividers, no cards;
   - headings are sentence case, no small caps labels;
   - on/off is a switch, a choice between options is a row of underlined tabs;
   - numbers go in plain boxes (10px corners); buttons keep the site's green pill;
   - colour: Cushion green for anything active or selected (switch, tab, focus, slider,
     share hover) and the button; band colours only for the band; grey only for quiet text. */

/* ---------- header ---------- */
.tool-head { padding: 20px var(--gutter) 28px; max-width: 980px; }
.tool-head .display { margin-top: 0; font-size: 30px; }
.tool-head .lede { margin-top: 12px; font-size: 16px; line-height: 24px; max-width: 600px; }
@media (min-width: 640px) { .tool-head { padding-block: 32px 36px; } .tool-head .display { font-size: 40px; } }
@media (min-width: 1024px) { .tool-head .display { font-size: 46px; } }

/* ---------- the calculator band ---------- */
.bench { background: var(--surface-1); border-block: 1px solid var(--line); }
.calc { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: 28px 32px; }
.calc__out { margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(43, 138, 0, .14); }
@media (min-width: 900px) {
  .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-block: 44px 48px; }
  .calc__in { padding-right: 48px; }
  .calc__out { margin-top: 0; padding: 0 0 0 48px; border-top: 0; border-left: 1px solid rgba(43, 138, 0, .14); }
}
.calc__head, .r__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 28px; margin-bottom: 22px; }
.calc__title, .r__title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--heading); }

/* ---------- fields ---------- */
.fld + .fld { margin-top: 24px; }
.fld__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; min-height: 28px; margin-bottom: 8px; }
.fld__head > [hidden] { display: none; }
.fld__label { font-size: 15px; font-weight: 600; color: var(--heading); }
.fld__label small { font-size: 13px; font-weight: 500; color: var(--faint); }
.fld__row { display: flex; gap: 10px; }
.fld__row > * { flex: 1 1 0; min-width: 0; }
.fld__row > [hidden] { display: none; }

/* number boxes */
.box { display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 14px; background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; cursor: text; transition: border-color .15s, box-shadow .15s; }
.box:hover { border-color: #a9d68f; }
.box:focus-within { border-color: var(--green-ink); box-shadow: 0 0 0 3px rgba(85, 255, 0, .22); }
.box.is-bad { border-color: #d42f2f; }
.box__tag { font-size: 13px; font-weight: 500; color: var(--muted); }
.box__sym, .box__suffix { font-size: 16px; font-weight: 600; color: var(--muted); }
.box input { flex: 1; width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; font-weight: 600; color: var(--heading); }
@media (max-width: 599px) {
  .fld__row .box__tag + .box__sym { display: none; } /* opening/closing on phones: label, then the number */
}

/* month-end grid */
.series { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .series { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.box--cell { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; height: 54px; padding: 0 10px; }
.box--cell .box__tag { font-size: 11.5px; line-height: 14px; }
.box--cell input { flex: 0 0 auto; font-size: 15px; line-height: 20px; }
.box--cell input::placeholder { color: var(--line-strong); }

/* a choice between options: underlined tabs */
.opts { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.opts button { padding: 3px 0; border-bottom: 2px solid transparent; font-size: 13.5px; font-weight: 600; color: var(--muted); transition: color .15s, border-color .15s; }
.opts button:hover { color: var(--green-ink); }
.opts button[aria-pressed="true"] { color: var(--green-ink); border-bottom-color: var(--green); }

/* on/off: a switch */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { position: relative; flex: 0 0 auto; width: 36px; height: 20px; border-radius: 99px; background: var(--line-strong); transition: background .2s var(--ease); }
.switch__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 16, .25); transition: transform .2s var(--ease); }
.switch input:checked + .switch__track { background: var(--green-ink); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--green-ink); outline-offset: 2px; }
.switch__label { font-size: 14px; font-weight: 600; color: var(--heading); }
.fld__head .switch__label { font-size: 13.5px; color: var(--muted); }

.more { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(43, 138, 0, .14); }
.more[hidden] { display: none; }

/* ---------- result ---------- */
.r__share { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); transition: color .15s; }
.r__share:hover { color: var(--green-ink); }
.r__big { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--heading); }
.r__big b { font-size: clamp(64px, 9vw, 88px); line-height: .95; font-weight: 800; letter-spacing: -.05em; }
.r__big span { font-size: 20px; font-weight: 600; color: var(--muted); }
.is-empty .r__big b { color: var(--line-strong); }
.r__band { margin: 14px 0 0; font-size: 15px; color: var(--body); }
.r__band i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; background: var(--tone); }
.r__band strong { font-weight: 700; color: var(--heading); }
.r__error { margin: 14px 0 0; font-size: 15px; font-weight: 600; color: #b42318; }

[data-tone="green"] { --tone: #3fc400; }
[data-tone="lime"] { --tone: #a6e22e; }
[data-tone="amber"] { --tone: #f5a300; }
[data-tone="orange"] { --tone: #f2711c; }
[data-tone="red"] { --tone: #e5484d; }

.scale { margin-top: 22px; }
.scale__bar { position: relative; display: flex; gap: 3px; height: 6px; }
/* every band shows its colour; the one holding the marker is full strength, the rest dimmed */
.scale__bar i { height: 100%; border-radius: 99px; background: var(--tone); opacity: .24; transition: opacity .2s, transform .2s; }
.scale__bar i.on { opacity: 1; transform: scaleY(1.35); box-shadow: 0 2px 10px -2px var(--tone); }
.scale__dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--heading); transition: left .25s var(--ease); }
.scale__ticks { position: relative; height: 16px; margin-top: 8px; font-size: 11.5px; color: var(--faint); }
.scale__ticks span { position: absolute; transform: translateX(-50%); }
.scale__ticks span:first-child { transform: none; }
.scale__ticks span:last-child { transform: translateX(-100%); }

.r__free { margin: 18px 0 0; font-size: 15px; color: var(--body); }
.r__free strong { color: var(--heading); }

.r__stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 22px 0 0; padding: 16px 0; border-block: 1px solid rgba(43, 138, 0, .14); }
.r__stats > div { padding: 0 14px; }
.r__stats > div:first-child { padding-left: 0; }
.r__stats > div + div { border-left: 1px solid var(--line); }
.r__stats dt { font-size: 13px; font-weight: 500; color: var(--muted); }
.r__stats dd { margin: 4px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--heading); }
.r__stats dd.sub { margin-top: 2px; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--faint); }
@media (max-width: 420px) { .r__stats > div { padding: 0 8px; } .r__stats dd { font-size: 15px; } }
.r__line { margin: 14px 0 0; font-size: 15px; color: var(--body); }
.r__line b { color: var(--heading); }
.r__line[hidden] { display: none; }

.r__target { margin-top: 20px; }
.r__target-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; font-weight: 600; color: var(--heading); }
.r__target output { font-weight: 700; }
.r__target p { margin: 8px 0 0; font-size: 15px; color: var(--body); }
.r__target p b { color: var(--green-ink); font-weight: 700; }
.r__target input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; margin: 16px 0 6px; border-radius: 99px; outline-offset: 6px;
  background: linear-gradient(90deg, #3fc400 var(--fill, 50%), #d9ead0 var(--fill, 50%)); }
.r__target input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--green-ink); cursor: grab; }
.r__target input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--green-ink); cursor: grab; }
.r__target input[type=range]:disabled::-webkit-slider-thumb { cursor: default; }
.r__note { margin: 18px 0 0; font-size: 12.5px; color: var(--faint); }

/* locked extras: not drawn at all until unlocked, so nothing peeks out around the form */
.lock { position: relative; }
.lock[hidden] { display: none; }
.lock.is-locked .lock__body { display: none; }
.gate { display: flex; flex-direction: column; align-items: flex-start; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(43, 138, 0, .14); }
.gate[hidden] { display: none; }
.gate__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: -.02em; color: var(--heading); }
.gate__title svg { flex: 0 0 auto; color: var(--green-ink); }
.gate__text { margin: 6px 0 0; max-width: 440px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.gate__row { display: flex; gap: 8px; width: 100%; max-width: 460px; margin-top: 16px; }
.gate__row input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 14px; font: inherit; font-size: 16px; font-weight: 500; color: var(--heading); background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; outline: 0; transition: border-color .15s, box-shadow .15s; }
.gate__row input:focus { border-color: var(--green-ink); box-shadow: 0 0 0 3px rgba(85, 255, 0, .22); }
.gate__row input.is-bad { border-color: #d42f2f; }
.gate__row .btn { min-height: 48px; padding: 0 22px; font-size: 15px; white-space: nowrap; }
.gate__row .btn[disabled] { opacity: .6; cursor: default; transform: none; }
@media (max-width: 420px) { .gate__row { flex-direction: column; } }
.gate__msg { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: #b42318; }
.gate__msg:empty { display: none; }
.gate__fine { margin-top: 8px; font-size: 12px; color: var(--faint); }
.gate__fine a { text-decoration: underline; }
.r__unlocked { margin: 14px 0 0; font-size: 13.5px; font-weight: 600; color: var(--green-ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- how it works ---------- */
.how { max-width: 760px; margin: 80px auto 0; padding-inline: var(--gutter); }
.how__h { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -.03em; color: var(--heading); }
@media (min-width: 640px) { .how__h { font-size: 32px; } }
.how__h--sub { margin-top: 64px; font-size: 24px; }
@media (min-width: 640px) { .how__h--sub { font-size: 26px; } }
.how__lede { margin: 12px 0 0; font-size: 16px; line-height: 1.65; color: var(--muted); }

.formula { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; margin: 28px 0 0; padding: 22px 0; border-block: 1px solid var(--line); }
.formula__t { display: inline-flex; flex-direction: column; }
.formula__t b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--heading); }
.formula__t:first-child b { color: var(--green-ink); }
.formula__t small { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.formula__op { font-size: 20px; font-weight: 500; line-height: 28px; color: var(--faint); }

.acc { margin-top: 28px; border-top: 1px solid var(--line); }
.how__h + .acc { margin-top: 20px; }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px; font-size: 16.5px; font-weight: 600; color: var(--heading); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ''; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--ease); }
.acc details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.acc summary:hover { color: var(--green-ink); }
.acc__body { padding: 0 2px 20px; font-size: 16px; line-height: 1.7; color: var(--body); }
.acc__body p { margin: 0 0 12px; }
.acc__body p:last-child, .acc__body ul:last-child { margin-bottom: 0; }
.acc__body ul { margin: 0 0 12px; padding-left: 20px; }
.acc__body li { margin-bottom: 8px; }
.acc__body li::marker { color: #3fc400; }
.acc__body strong { color: var(--heading); }

.ex { width: 100%; border-collapse: collapse; font-size: 15px; }
.ex td { padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ex tr:last-child td { border-bottom: 0; }
.ex td:last-child { padding-left: 12px; text-align: right; font-weight: 700; color: var(--heading); white-space: nowrap; }

.tool-related { margin-top: 0; margin-bottom: 96px; }
.tool-related .how__h--sub { margin-bottom: 24px; }

/* ---------- phones: result bar pinned to the bottom while the inputs are on screen ---------- */
.rbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 14px 10px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line); box-shadow: var(--shadow-float); text-align: left; color: var(--heading);
  transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; transition: transform .25s var(--ease), opacity .2s; }
.rbar.is-on { transform: none; opacity: 1; pointer-events: auto; }
.rbar__k { font-size: 13px; font-weight: 600; color: var(--muted); }
.rbar__v { margin-left: auto; white-space: nowrap; }
.rbar__v b { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.rbar__v span { font-size: 14px; font-weight: 600; color: var(--muted); }
.rbar__band { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--body); white-space: nowrap; }
.rbar__band i { width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--line-strong)); }
.rbar__go { flex: 0 0 auto; color: var(--muted); }
@media (min-width: 900px) { .rbar { display: none; } }
@media (max-width: 359px) { .rbar__k { display: none; } }