/* adicot.com calculator library.

   Deliberately separate from static/public/site.css: the two stylesheets never
   load on the same page, so the token names may repeat with different values.
   Every class here is `c-` prefixed, and nothing here defines .container, .btn,
   .h1, .eyebrow or .section, which belong to the marketing stylesheet. */

:root{
  --c-paper:   #FDFDFE;
  --c-ink:     #2E2E2E;
  --c-accent:  #0F3AFF;
  --c-link:    #1A2DF3;
  --c-tint:    #F2F2F2;
  --c-rule:    #B6B6B6;
  --c-muted:   #898989;
  --c-body:    #5B5B5B;
  --c-new:     #FF4040;
  --c-warn:    #B45309;

  /* Wix served this library in Madefor Display, which is proprietary and cannot
     be self-hosted. Inter is the closest freely licensed neo-grotesque. */
  --c-font: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --c-wrap: 1200px;
  --c-gutter: 32px;
}

*,*::before,*::after{box-sizing:border-box;}
body.c-body{margin:0;background:var(--c-paper);color:var(--c-body);
  font:400 17px/1.65 var(--c-font);-webkit-font-smoothing:antialiased;}
.c-body h1,.c-body h2,.c-body h3,.c-body h4,.c-body h5{color:var(--c-ink);margin:0 0 .5em;}
.c-body h1{font-size:clamp(30px,4vw,44px);line-height:1.15;}
.c-body h2{font-size:clamp(23px,2.6vw,30px);line-height:1.2;}
.c-body h5{font-size:15px;letter-spacing:.04em;text-transform:uppercase;}
.c-body a{color:var(--c-link);}
.c-wrap{max-width:var(--c-wrap);margin:0 auto;padding-inline:var(--c-gutter);}
.c-skip{position:absolute;left:-9999px;}
.c-skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:10;}

/* ── header ──────────────────────────────────────────────────────── */
.c-header{background:#fff;border-bottom:1px solid var(--c-rule);}
.c-header__top{display:flex;align-items:center;gap:20px;padding:14px 0;}
.c-header__logo{height:52px;width:auto;display:block;}
.c-header__wordmark{font-size:21px;font-weight:600;color:var(--c-ink);}
.c-header__brand{display:flex;align-items:center;gap:14px;text-decoration:none;}
.c-signup{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.c-signup__label{font-size:13px;color:var(--c-muted);}
.c-signup input{font:inherit;font-size:14px;padding:7px 10px;
  border:1px solid var(--c-rule);border-radius:2px;min-width:190px;}
.c-signup button{font:inherit;font-size:14px;padding:7px 14px;border:0;border-radius:2px;
  background:var(--c-accent);color:#fff;cursor:pointer;}
.c-signup__hp{position:absolute;left:-9999px;}

/* ── nav + mega menu ─────────────────────────────────────────────── */
.c-nav{border-top:1px solid var(--c-tint);}
.c-nav__list{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0;}
.c-nav__link{display:block;padding:11px 14px;font-size:15px;text-decoration:none;
  color:var(--c-ink);background:none;border:0;font-family:inherit;cursor:pointer;}
.c-nav__link:hover,.c-nav__link[aria-expanded="true"]{background:var(--c-tint);color:var(--c-accent);}
.c-nav__item{position:relative;}
.c-panel{display:none;position:absolute;left:0;top:100%;z-index:20;min-width:min(94vw,720px);
  background:#fff;border:1px solid var(--c-rule);padding:20px;
  box-shadow:0 12px 28px rgba(0,0,0,.10);}
.c-panel[data-open]{display:block;}
.c-panel__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:6px 22px;}
.c-tile{display:flex;align-items:center;gap:10px;padding:6px 8px;text-decoration:none;
  color:var(--c-ink);font-size:14px;border-radius:2px;}
.c-tile:hover{background:var(--c-tint);}
.c-tile__new{background:var(--c-new);color:#fff;font-size:10px;font-weight:700;
  padding:1px 5px;border-radius:2px;margin-left:4px;}
.c-tile__fallback{width:48px;height:48px;flex:none;background:var(--c-tint);border-radius:2px;}

/* ── footer ──────────────────────────────────────────────────────── */
.c-footer{margin-top:64px;border-top:1px solid var(--c-rule);background:var(--c-tint);
  padding:28px 0 40px;}
.c-footer__marks{display:flex;align-items:center;gap:22px;margin-bottom:14px;}
.c-footer__marks img{height:42px;width:auto;}
.c-disclaimer{font-size:10px;text-align:justify;color:var(--c-body);}
.c-disclaimer p{margin:0 0 8px;}

/* ── index ───────────────────────────────────────────────────────── */
.c-group{margin:0 0 40px;}
.c-group__head{border-bottom:1px solid var(--c-rule);padding-bottom:6px;margin-bottom:14px;}
.c-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:4px 22px;list-style:none;margin:0;padding:0;}
/* The live page's four masthead images. Normalised to 96 px tall, the tallest
   of the four originals, so a 512 px hero and a 96 px line icon sit at one
   scale and neither is upscaled. */
.c-strip{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin:0 0 30px;}
.c-strip img{display:block;height:96px;width:auto;}

/* ── calculator page ─────────────────────────────────────────────── */
.c-page{padding:36px 0;}
.c-page__head{text-align:center;margin-bottom:22px;}
.c-page__icon{max-width:180px;height:auto;margin:0 auto 14px;display:block;}
.c-page__note{font-style:italic;color:var(--c-muted);}
/* The "Instructions:" block that sits above the widget: a lead line and an
   <ol> of steps. Held to the same 78ch measure as .c-prose, since it is read
   the same way, and marked with the accent rule .c-calc__note already uses. */
.c-instructions{max-width:78ch;margin:0 0 22px;padding:14px 18px;
  background:var(--c-tint);border-left:3px solid var(--c-accent);border-radius:2px;}
.c-instructions > :first-child{margin-top:0;}
.c-instructions > :last-child{margin-bottom:0;}
.c-instructions p{margin:0 0 8px;}
.c-instructions ol,.c-instructions ul{margin:0;padding-left:22px;}
.c-instructions li{margin-bottom:4px;}
.c-embed{width:100%;min-height:760px;border:1px solid var(--c-rule);background:#fff;}
.c-prose{max-width:78ch;}
.c-prose h2{margin-top:1.4em;}
.c-related{margin-top:40px;border-top:1px solid var(--c-rule);padding-top:18px;}
.c-related__list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0;}

@media (max-width:900px){
  :root{--c-gutter:18px;}
  .c-header__top{flex-wrap:wrap;}
  .c-signup{margin-left:0;width:100%;}
  .c-panel{position:static;min-width:0;border-width:1px 0 0;box-shadow:none;}
}

/* ── home + forms ────────────────────────────────────────────────── */
.c-trending__head{margin-top:34px;}
.c-trending{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:18px;list-style:none;margin:0;padding:0;}
.c-trending__card{border:1px solid var(--c-rule);background:#fff;padding:16px;border-radius:2px;}
.c-trending__card p{margin:6px 0 0;font-size:14px;}
/* A fixed box with contain, not cover: these are line diagrams on white, and
   cropping one to fill the card cuts the part that explains it. */
.c-trending__thumb{display:block;width:100%;height:130px;object-fit:contain;
  margin:0 0 12px;}
.c-form{display:grid;gap:6px;max-width:620px;}
.c-form label{font-size:14px;color:var(--c-ink);margin-top:10px;}
.c-form input,.c-form textarea{font:inherit;font-size:15px;padding:9px 11px;
  border:1px solid var(--c-rule);border-radius:2px;}
.c-form button{margin-top:16px;justify-self:start;font:inherit;padding:9px 20px;border:0;
  border-radius:2px;background:var(--c-accent);color:#fff;cursor:pointer;}
.c-form__error{color:#B00020;}

/* ── blog ────────────────────────────────────────────────────────── */
.c-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 26px;}
.c-tab{font-size:14px;padding:6px 12px;border:1px solid var(--c-rule);border-radius:2px;
  text-decoration:none;color:var(--c-ink);background:#fff;}
.c-tab--on{background:var(--c-accent);border-color:var(--c-accent);color:#fff;}
.c-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:28px;list-style:none;margin:0;padding:0;}
.c-post h2{font-size:20px;margin:10px 0 4px;}
.c-post__hero{width:100%;height:auto;border:1px solid var(--c-rule);border-radius:2px;}
.c-post__meta{font-size:13px;color:var(--c-muted);margin:0 0 8px;}
.c-post__cats{font-size:13px;}
.c-post__back{margin-top:36px;}

/* ── ported calculator ───────────────────────────────────────────── */
.c-calc{border:1px solid var(--c-rule);background:#fff;padding:22px;border-radius:2px;
  display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.c-calc__row{display:grid;grid-template-columns:1fr 140px;gap:10px;align-items:center;
  padding:5px 0;}
.c-calc__row label{font-size:14px;color:var(--c-ink);}
.c-calc__unit{color:var(--c-muted);font-size:12px;margin-left:4px;}
.c-calc__row input,.c-calc__row select{font:inherit;font-size:15px;padding:7px 9px;
  border:1px solid var(--c-rule);border-radius:2px;width:100%;}
.c-calc__notes{margin-top:14px;}
.c-calc__note{font-size:12px;color:var(--c-muted);border-left:3px solid var(--c-accent);
  padding-left:10px;}

/* ── calculator results ──────────────────────────────────────────── */
/* Carries the label a test reads and a screen reader announces, for the cells
   where the label is not also the visible text of the row. */
.c-sr{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;
  clip-path:inset(50%);}
.c-results{min-width:0;border-left:1px solid var(--c-rule);padding-left:22px;}
.c-results > :first-child{margin-top:0;}
/* Results recompute on every keystroke; proportional digits visibly jitter. */
[data-out]{font-variant-numeric:tabular-nums;}
/* A blank value leaves no gap. :empty covers the state before the first
   recalc, [data-state] the one recalc sets when the formatted value is blank. */
.c-rrow:has(.c-rval:empty),.c-rrow:has(.c-rval[data-state="empty"]){display:none;}

.c-rhead{margin:0 0 20px;}
.c-rhead h5{margin:0 0 2px;}
.c-rhead__val{margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  color:var(--c-accent);font-size:clamp(32px,4vw,44px);font-weight:700;line-height:1.1;}
.c-rhead__unit{color:var(--c-muted);font-size:15px;font-weight:400;}

/* The warning outputs are prose, not numbers, and their strings carry a
   literal newline the engines rely on. */
.c-rwarn{margin:0 0 10px;padding:9px 12px;border-radius:2px;background:var(--c-tint);
  border-left:3px solid var(--c-warn);color:var(--c-warn);font-size:14px;
  white-space:pre-line;}
.c-rwarn .c-rval{color:inherit;font-weight:400;text-align:left;padding-left:0;
  white-space:inherit;}

.c-rmore{margin:0 0 6px;}
/* Grids rather than <table>s so the three columns line up across rows without a
   fixed value column; `display:contents` is what lets a row still be one thing
   to hide. */
.c-rtable{display:grid;grid-template-columns:1fr auto auto;font-size:14px;}
.c-rtable > .c-rrow{display:contents;}
.c-rtable > .c-rrow > *{padding:7px 0;border-bottom:1px solid var(--c-tint);}
.c-rlabel{color:var(--c-body);}
.c-rval{color:var(--c-ink);font-weight:600;font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap;padding-left:14px;}
.c-runit{color:var(--c-muted);font-size:13px;white-space:nowrap;padding-left:8px;}
.c-rpivot{display:grid;gap:0 14px;margin-top:18px;font-size:14px;}
.c-rpivot__caption{grid-column:1/-1;margin:0 0 6px;color:var(--c-ink);font-weight:600;}
.c-rpivot__head{border-bottom:1px solid var(--c-rule);padding-bottom:5px;
  color:var(--c-ink);font-size:13px;text-align:right;}
.c-rpivot__head:first-of-type{text-align:left;}
.c-rpivot > .c-rlabel,.c-rpivot > .c-rval{padding:5px 0;
  border-bottom:1px solid var(--c-tint);}

@media (max-width:700px){
  .c-results{border-left:0;padding-left:0;border-top:1px solid var(--c-rule);
    padding-top:20px;}
}

/* ── reference tables ────────────────────────────────────────────── */
/* Static reference tables recovered from the Wix table widget. They render
   inside .c-prose, capped at 78ch, so the wrapper scrolls rather than letting a
   six-column table spill out of the text column. <figure> ships with a 40px
   inline margin of its own, which would indent them out of alignment. */
.c-table__wrap{margin:1.5em 0;overflow-x:auto;border-radius:2px;}
.c-table{border-collapse:collapse;width:100%;background:#fff;font-size:14px;}
.c-table caption{caption-side:top;text-align:left;padding:0 0 8px;
  color:var(--c-ink);font-weight:600;}
.c-table th,.c-table td{border:1px solid var(--c-rule);padding:6px 10px;
  text-align:left;vertical-align:top;}
.c-table th{background:var(--c-tint);color:var(--c-ink);}
.c-table thead th{white-space:nowrap;}
.c-table td{font-variant-numeric:tabular-nums;}
@media (max-width:900px){.c-table{font-size:13px;}}
@media (max-width:700px){.c-table th,.c-table td{padding:5px 7px;}}

/* ── figures ─────────────────────────────────────────────────────── */
/* Page-body diagrams, fetched at a 600 px long edge by
   scripts/fetch_calc_assets.py. .c-prose has no img reset of its own, so
   without one a 600 px figure overflows the 78ch column on a narrow viewport,
   and <figure> ships with a 40 px inline margin that would indent it. */
.c-prose img{max-width:100%;height:auto;}
.c-figure{margin:1.5em 0;}
.c-figure picture{display:block;}
.c-figure img{display:block;max-width:100%;height:auto;margin-inline:auto;
  background:#fff;border:1px solid var(--c-rule);border-radius:2px;}
.c-figure figcaption{margin-top:6px;font-size:13px;color:var(--c-muted);
  text-align:center;}
/* Explicit 3 tracks, not auto-fill: the live pages lay the six kitchen-hood
   diagrams out as a fixed 3x2, which minmax() would only reproduce by accident
   of how it happens to divide the prose column. */
.c-figures{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:1.5em 0;}
.c-figures .c-figure{margin:0;}
/* A cell whose caption is a full sentence rather than a label reads as body copy. */
.c-figures--prose figcaption{text-align:left;}
@media (max-width:900px){.c-figures{grid-template-columns:repeat(2,1fr);}}
@media (max-width:700px){.c-figures{grid-template-columns:1fr;}}

/* ── print ───────────────────────────────────────────────────────── */
/* Engineers print these pages for a job file, so drop the site chrome and
   keep the answer whole. */
@media print{
  .c-header,.c-nav,.c-panel,.c-signup,.c-footer,.c-related{display:none;}
  .c-calc,.c-results,.c-rhead,.c-rpivot{break-inside:avoid;}
  .c-calc{border-color:var(--c-rule);}
}