/* Calculator and tool pages: cleaner cards, bigger touch targets, mobile-first.
   Loaded after tools.css / tools-extra.css / tools3.css on every tool page. */
:root{--tm-ink:#0B1F3A;--tm-blue:#1F5FD1;--tm-line:#E3EAF5;--tm-soft:#F3F7FE;--tm-mute:#526077}

/* the tool sits in one rounded card */
main .tool,main .xt-wrap{background:#fff;border:1px solid var(--tm-line);border-radius:24px;padding:24px;box-shadow:0 14px 40px rgba(11,31,58,.06)}
main section.s:has(.tool),main #tool-section{background:var(--tm-soft)}
.fs{border:1px solid var(--tm-line);border-radius:16px;padding:18px 18px 6px;background:#fff}
.fs legend{font-size:14px;letter-spacing:.02em;color:var(--tm-ink);background:#fff;border-radius:999px;padding:2px 10px}
.fld{font-size:14px}
.fld input,.fld select,.f input,.f select,.xt-form input:not([type=checkbox]):not([type=radio]),.xt-form select,.xt-form textarea{font-size:16px!important;min-height:50px;border:1.5px solid #C9D3E3;border-radius:12px;padding:12px 14px;background:#fff;transition:border-color .15s,box-shadow .15s}
.fld input:focus,.fld select:focus,.xt-form input:focus,.xt-form select:focus,.xt-form textarea:focus{outline:none;border-color:var(--tm-blue);box-shadow:0 0 0 4px rgba(31,95,209,.15)}
.fld input::placeholder{color:#9AA8BC}
.tbtn{border-radius:999px!important;min-height:50px;padding:13px 24px;font-size:15.5px}
.tbtn.p{background:var(--tm-ink)!important;box-shadow:0 10px 22px rgba(11,31,58,.22)!important}
.tbtn.p:hover{background:#16325A!important}
.rcard{border:1.5px solid #C9D8F2;border-radius:20px;padding:22px;background:linear-gradient(180deg,#fff,#F7FAFF)}
.rcard h2{font-size:20px}
.formula{border-radius:14px}
.ex{border-radius:16px}

/* tool pages: compact intro so the calculator is near the top */
section.hero.tools-hero .w{padding-top:26px;padding-bottom:26px}
section.hero.tools-hero h1{font-size:36px}

/* jump link shown on phones above the intro text */
.tm-jump{display:none}

@media(max-width:700px){
  section.hero.tools-hero .w{padding-top:16px;padding-bottom:18px}
  section.hero.tools-hero h1{font-size:26px;margin-bottom:8px}
  section.hero.tools-hero h1:after{display:none}
  section.hero.tools-hero p{font-size:14.5px!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px}
  section.hero.tools-hero .kick{display:none}
  .tm-jump{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:10px 16px;border-radius:999px;background:var(--tm-ink);color:#fff!important;font-weight:700;font-size:14px;text-decoration:none}
  main section.s:has(.tool) .w,main #tool-section .w{padding-left:12px;padding-right:12px}
  main section.s:has(.tool),main #tool-section{padding-top:14px;padding-bottom:24px}
  main .tool,main .xt-wrap{padding:14px;border-radius:18px;box-shadow:none}
  .fs{padding:14px 12px 4px;border-radius:14px}
  .g2,.g3{grid-template-columns:1fr!important}
  .fld{margin-bottom:12px}
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar .fld{min-width:0}
  /* primary actions stay reachable while scrolling a long form */
  .actions{position:sticky;bottom:0;z-index:5;margin:8px -14px -14px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-top:1px solid var(--tm-line);border-radius:0 0 18px 18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .actions .tbtn{width:100%;text-align:center;padding:12px 10px}
  .actions .tbtn.p{grid-column:1/-1;order:-1}
  .tcol-r{margin-top:14px}
  .rcard{padding:16px;border-radius:16px}
  .formula{font-size:13px}
  table{font-size:14px}
  main .w>table,main .tbl-wrap,main .rtable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .wa{bottom:150px;width:50px;height:50px}
}
/* result highlight after calculating */
.tm-flash{animation:tmflash 1.2s ease}
@keyframes tmflash{0%{box-shadow:0 0 0 0 rgba(31,95,209,.45)}100%{box-shadow:0 0 0 14px rgba(31,95,209,0)}}
@media(prefers-reduced-motion:reduce){.tm-flash{animation:none}}
.rcard,#calc,#tool-section{scroll-margin-top:84px}