/* KMD theme skin for the calculators. Loaded after each calculator's own stylesheet.
   The calculators keep their dark instrument-panel layout; this sets them in the site's navy, type and buttons. */

/* The calculator stylesheets name Cormorant Garamond and DM Sans. Point those names at the theme's own
   self-hosted IBM Plex Sans so nothing is fetched from Google and the type matches the rest of the site. */
@font-face{font-family:'Cormorant Garamond';src:url(../fonts/ibm-plex-sans.woff2) format('woff2');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(../fonts/ibm-plex-sans-italic.woff2) format('woff2');font-weight:100 700;font-style:italic;font-display:swap}
@font-face{font-family:'DM Sans';src:url(../fonts/ibm-plex-sans.woff2) format('woff2');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url(../fonts/ibm-plex-sans-italic.woff2) format('woff2');font-weight:100 700;font-style:italic;font-display:swap}

/* The calculator stylesheets also paint the old theme's page containers; here the bands own the page background */
body.page #main-container,body.page .ct-container-full,body.page .entry-content,body.page article{background:transparent}

.kmd-calc,.kmd-calc *,.kmd-calc *::before,.kmd-calc *::after{box-sizing:border-box}

/* Panel: navy ground with a soft lift, framed like the site's cards */
.kmd-calc{position:relative;border-radius:20px;box-shadow:0 1px 0 rgba(255,255,255,.6),0 18px 40px rgba(0,19,48,.18),0 40px 90px rgba(0,19,48,.16);margin-block:8px}
.kmd-calc::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(255,255,255,.55),rgba(192,192,192,.18) 40%,rgba(192,192,192,.45));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}
.kmd-calc [id^="kmd-"][id$="-wrap"]{background-color:#001330!important;background-image:radial-gradient(120% 80% at 0% 0%,rgba(28,51,92,.85),rgba(0,19,48,0) 60%),radial-gradient(90% 70% at 100% 100%,rgba(37,51,71,.7),rgba(0,19,48,0) 60%)!important;border-radius:20px;padding-top:28px;overflow:hidden;line-height:1.6}
.kmd-calc [class$="-bleed"]{width:100%!important;max-width:100%!important;margin:0!important}

/* Primary actions: the site's metallic silver button with the same hover lift */
.kmd-calc .kn-email-btn,.kmd-calc .kp-email-btn,.kmd-calc .kb-email-btn,.kmd-calc .ks-email-btn,.kmd-calc .kb2-send-btn,.kmd-calc .kmd-cta-btn,.kmd-calc .ks-cta-btn{
  color:#001330!important;background-color:#E9EDF2;background-image:linear-gradient(110deg,#FFFFFF 0%,#E9EDF2 30%,#AEB6C2 48%,#F4F6F9 56%,#DDE2E8 75%,#FFFFFF 100%);background-size:260% 100%;background-position:100% 0;
  border-radius:999px;font-weight:600;letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.28),0 10px 22px rgba(0,0,0,.32);
  transition:transform .25s ease,background-position .6s ease,box-shadow .25s ease}
.kmd-calc .kn-email-btn:hover,.kmd-calc .kp-email-btn:hover,.kmd-calc .kb-email-btn:hover,.kmd-calc .ks-email-btn:hover,.kmd-calc .kb2-send-btn:hover,.kmd-calc .kmd-cta-btn:hover,.kmd-calc .ks-cta-btn:hover{
  background-color:#E9EDF2;background-position:0 0;transform:translateY(-2px);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.3),0 18px 36px rgba(0,0,0,.42),0 0 0 4px rgba(201,207,216,.16)}

/* Visible keyboard focus on every control */
.kmd-calc button:focus-visible,.kmd-calc a:focus-visible,.kmd-calc input:focus-visible,.kmd-calc select:focus-visible{outline:2px solid #C0C0C0!important;outline-offset:3px}

/* Muted labels: lift the lightest greys to keep 4.5:1 on the navy ground */
.kmd-calc [class$="-label"],.kmd-calc [class*="-sub"],.kmd-calc [class*="-note"],.kmd-calc [class*="-hint"]{color:#b4bcc6}

/* Phone widths: grids may shrink below their content, charts scale with their box */
.kmd-calc canvas{max-width:100%!important;height:auto}
.kmd-calc [class$="-columns"],.kmd-calc [class$="-grid"],.kmd-calc [class$="-key-grid"]{min-width:0}
.kmd-calc [class$="-columns"]>*,.kmd-calc [class$="-grid"]>*{min-width:0}
#kmd-pen-wrap .kn-columns,#kmd-pen-wrap .kn-grid,#kmd-pen-wrap .kn-key-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#kmd-pen-wrap .kn-meta-row{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){ #kmd-pen-wrap .kn-columns{grid-template-columns:minmax(0,1fr)} }
@media (max-width:680px){
  #kmd-pen-wrap .kn-grid,#kmd-pen-wrap .kn-key-grid{grid-template-columns:minmax(0,1fr)}
  #kmd-pen-wrap .kn-meta-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .kmd-calc{border-radius:14px}
  .kmd-calc [id^="kmd-"][id$="-wrap"]{border-radius:14px;padding-top:16px}
}

@media (prefers-reduced-motion:reduce){
  .kmd-calc *{transition:none!important;animation:none!important}
}

/* Heading for screen readers only */
.kmd-calc .kmd-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The calculator uses .kmd-note for its small inline notes; keep the theme callout style off them */
.kmd-calc .kmd-note{background:none;border:0;padding:0!important;margin:0!important;max-width:none}