/*! VeroTouch Concrete Calculator — generated by build.py, do not edit */

.vt-calc{
  /* Zero by default: the theme controls page spacing. Set this from Divi's
     custom CSS if you ever need the calculator to clear a floating header:
         .vt-calc { --vt-header-clear: 160px; }  */
  --vt-header-clear: 0px;
  padding-top: var(--vt-header-clear);

  /* ── Brand tokens, sampled directly from verotouch.com ── */
  --vt-ink:        #363836;   /* warm charcoal — dark bands + headings   */
  --vt-accent:     #FF520E;   /* signal orange — the "+" marker          */
  --vt-deep:       #05454F;   /* deep teal — the circle-check icons      */
  --vt-surface:    #F4F4F4;   /* light section ground                    */
  --vt-paper:      #FFFFFF;   /* card ground                             */

  /* Neutrals biased toward the ink, so they read as chosen, not default */
  --vt-line:       #DFE0DF;
  --vt-line-soft:  #ECEDEC;
  --vt-muted:      #6E706E;
  --vt-ink-70:     rgba(54,56,54,.70);
  --vt-paper-70:   rgba(255,255,255,.72);
  --vt-paper-45:   rgba(255,255,255,.45);

  --vt-accent-soft: #FFF1EB;

  /* Semantic — deliberately separate from the accent hue */
  --vt-ok:         #05454F;
  --vt-ok-bg:      #E7F0F1;
  --vt-warn:       #8A5A00;
  --vt-warn-bg:    #FBF1DE;

  /* Not defined on purpose: every rule reads var(--vt-font-display, inherit),
     so headings and body inherit the active theme. Define them here to pin. */
  --vt-font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --vt-r:      14px;   /* card radius, matching the site's cards */
  --vt-r-sm:   8px;
  --vt-gap:    28px;

  /* ── Base ── */
  font-family: var(--vt-font-body, inherit);
  color: var(--vt-ink);
  background: var(--vt-surface);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* Scoped reset — only touches elements inside the calculator */
.vt-calc *, .vt-calc *::before, .vt-calc *::after { box-sizing: border-box; }
.vt-calc p, .vt-calc h1, .vt-calc h2, .vt-calc h3, .vt-calc h4,
.vt-calc ul, .vt-calc ol, .vt-calc figure, .vt-calc table { margin: 0; padding: 0; }
.vt-calc ul, .vt-calc ol { list-style: none; }
.vt-calc button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.vt-calc input, .vt-calc select { font: inherit; color: inherit; }
.vt-calc :focus-visible { outline: 2px solid var(--vt-accent); outline-offset: 2px; border-radius: 3px; }
/* ── Calculator access: choose your side ─────────────────────────────
   Two panels, side by side on a wide screen and stacked on a narrow one.
   The public half is a description and a button; the customer half carries
   the sign-in form. min-width:0 on the children or long words refuse to
   let the columns shrink. */
.vt-access{ max-width: 1000px; margin: 0 auto; padding: 8px 0 56px; }
.vt-access__grid{ display: grid; gap: 20px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.vt-access__grid > *{ min-width: 0; }
.vt-access .vt-card{ padding: 26px 26px 24px; height: 100%;
  display: flex; flex-direction: column; }
.vt-access__list{ list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px; }
.vt-access__list li{ position: relative; padding-left: 19px; font-size: .875rem;
  line-height: 1.45; color: var(--vt-muted); }
.vt-access__list li::before{ content: "+"; position: absolute; left: 0; top: -1px;
  color: var(--vt-accent); font-weight: 600; }
/* The spacer only opens up when a card is the taller of the two, so the
   action needs its own gap for when it is the shorter one. */
.vt-access__spacer{ flex: 1 1 auto; min-height: 20px; }
.vt-access__act{ margin: 20px 0 0; }
.vt-access form{ margin-top: 20px; }
/* The card head is a column flexbox, so an inline-block child still
   stretches to full width without this. */
.vt-access__tag{ display: inline-block; align-self: flex-start; width: fit-content;
  font-family: var(--vt-font-mono);
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; margin-bottom: 10px; }
.vt-access__tag--free{ background: var(--vt-surface); color: var(--vt-muted); }
.vt-access__tag--cust{ background: var(--vt-accent-soft); color: var(--vt-accent); }

/* ── Customer sign-in ────────────────────────────────────────────────
   Rendered by the plugin's [verotouch_login] shortcode onto an ordinary
   page, so it sits inside the site's own header and footer. Everything
   below reuses the card, field and button styles already defined. */
.vt-login{ max-width: 470px; margin: 0 auto; padding: 8px 0 56px; }
.vt-login .vt-card{ padding: 26px 26px 24px; }
.vt-login .vt-field{ margin-bottom: 15px; }
.vt-login__opts{ display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin: 4px 0 20px; }
.vt-login__check{ display: flex; align-items: center; gap: 8px; font-size: .84rem;
  color: var(--vt-muted); cursor: pointer; }
.vt-login__check input{ width: 15px; height: 15px; accent-color: var(--vt-accent); cursor: pointer; }
.vt-login__lost{ font-size: .84rem; color: var(--vt-muted); text-underline-offset: 2px; }
.vt-login__lost:hover{ color: var(--vt-accent); }
.vt-login form{ margin: 0 0 8px; }
.vt-login__foot{ margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--vt-line);
  font-size: .86rem; color: var(--vt-muted); }
.vt-login__foot a{ color: var(--vt-ink); text-underline-offset: 2px; }
.vt-login__who{ font-size: .95rem; margin-bottom: 18px; }
.vt-login__who b{ font-weight: 600; color: var(--vt-ink); }

/* ── Request customer access ─────────────────────────────────────────
   Sits under the two access panels, full width, so it reads as what you
   do when neither of them applies rather than as a third choice. Every
   Request access button in the plugin points at its anchor. */
.vt-req{ margin-top: 20px; padding: 26px 26px 24px; scroll-margin-top: 90px; }
.vt-req:focus{ outline: none; }
.vt-req__form{ margin-top: 20px; }
.vt-req__grid{ display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.vt-req__grid > *{ min-width: 0; }
.vt-req__wide{ margin-top: 14px; }
.vt-calc .vt-textarea{
  font-family: var(--vt-font-body, inherit); resize: vertical; min-height: 76px;
  line-height: 1.5;
}
/* The honeypot. Off-screen rather than display:none, because some bots skip
   anything they can see is hidden, and a label is what makes them fill it. */
.vt-req__hp{ position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; }
.vt-req .vt-err{ margin-top: 12px; }
.vt-req__fine{ margin-top: 16px; font-size: .76rem; color: var(--vt-muted);
  line-height: 1.6; }
.vt-req__fine a{ color: var(--vt-ink); text-underline-offset: 2px; }
.vt-req__done{ margin-top: 18px; padding: 22px 0 4px; text-align: center; }
.vt-req__tick{ font-family: var(--vt-font-mono); font-size: 1.6rem; font-weight: 600;
  color: var(--vt-accent); line-height: 1; margin-bottom: 10px; }
.vt-req__done .vt-card__note{ max-width: 52ch; margin: 8px auto 0; }
/* Shown in place of a Request access button when there is no access page to
   send anyone to. */
.vt-req__fallback{ margin-top: 14px; font-size: .84rem; color: var(--vt-muted);
  line-height: 1.6; }
.vt-req__fallback a{ color: var(--vt-ink); text-underline-offset: 2px; }

/* [hidden] is a UA rule and loses to any class that sets display — force it */
.vt-calc [hidden] { display: none !important; }

/* The customer-only sections are removed by JS at boot. CSS removes them a
   step earlier, so a public build cannot show them in the moment before the
   script runs — or at all, if a caching plugin defers the script and it never
   does. The attribute is written by the build, never by hand. */
.vt-calc[data-vt-tier="public"] [data-tier="pro"] { display: none !important; }

.vt-calc__inner{ max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ═══ Type scale ═══ */
.vt-h1{
  font-family: var(--vt-font-display, inherit);
  font-weight: 700; font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem);
  line-height: 1.03; letter-spacing: -.015em; text-wrap: balance; text-transform: uppercase;
}
.vt-h2{
  font-family: var(--vt-font-display, inherit);
  font-weight: 600; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
  line-height: 1.15; letter-spacing: -.01em;
}
.vt-h3{ font-family: var(--vt-font-display, inherit); font-weight: 600; font-size: 1.02rem; letter-spacing: -.005em; }
.vt-lede{ font-size: clamp(1rem, .96rem + .2vw, 1.12rem); color: var(--vt-ink-70); max-width: 62ch; }

/* The site's signature: an orange "+" ahead of an all-caps mono label */
.vt-eyebrow{
  display: flex; align-items: center; gap: .5em;
  font-family: var(--vt-font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--vt-ink);
}
.vt-eyebrow::before{ content: "+"; color: var(--vt-accent); font-weight: 600; font-size: 1.15em; line-height: 0; }
.vt-eyebrow--light{ color: var(--vt-paper); }
.vt-step{ color: var(--vt-muted); }
.vt-eyebrow--light .vt-step{ color: rgba(255,255,255,.55); }

/* ═══ Hero ═══ */
.vt-hero{ padding: clamp(40px, 5vw, 68px) 0 clamp(28px, 3vw, 40px); }
.vt-hero__grid{ display: grid; gap: 26px; }
@media (min-width: 900px){
  .vt-hero__grid{ grid-template-columns: minmax(0,1fr) auto; align-items: end; }
}
.vt-hero__head{ display: flex; flex-direction: column; gap: 16px; }
/* Right rail echoing the homepage's "+ DESIGN / + ENGINEERING" list */
.vt-rail{ display: flex; flex-direction: column; gap: 7px; }
@media (min-width: 900px){ .vt-rail{ align-items: flex-end; } }
.vt-rail li{
  font-family: var(--vt-font-mono); font-size: .705rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--vt-muted); white-space: nowrap;
}
.vt-rail li::before{ content: "+ "; color: var(--vt-accent); }

/* ═══ Docked live total ═══ */
/* If the theme has a fixed header, set --vt-dock-top to its height so the
   live-total bar docks beneath it instead of sliding underneath. */
.vt-dock{
  position: sticky; top: var(--vt-dock-top, 0px); z-index: 40;
  background: var(--vt-ink); color: var(--vt-paper);
  border-radius: 0 0 var(--vt-r) var(--vt-r);
  transform: translateY(-101%); opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  pointer-events: none;
}
.vt-dock.is-shown{ transform: translateY(0); opacity: 1; pointer-events: auto; }
.vt-dock__row{
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
  padding: 12px 20px; max-width: 1180px; margin: 0 auto;
}
.vt-dock__stat{ display: flex; align-items: baseline; gap: 8px; }
.vt-dock__k{
  font-family: var(--vt-font-mono); font-size: .66rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--vt-paper-70);
}
.vt-dock__v{ font-family: var(--vt-font-mono); font-size: 1.02rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.vt-dock__v--hero{ font-size: 1.28rem; color: var(--vt-accent); }
.vt-dock__spacer{ flex: 1 1 auto; }
@media (prefers-reduced-motion: reduce){ .vt-dock{ transition: none; } }

/* ═══ Sections & cards ═══ */
.vt-sections{ display: flex; flex-direction: column; gap: var(--vt-gap); padding-bottom: 56px; min-width: 0; }
.vt-sections > *{ min-width: 0; }
.vt-card{
  background: var(--vt-paper); border: 1px solid var(--vt-line);
  border-radius: var(--vt-r); padding: clamp(20px, 2.4vw, 30px); min-width: 0;
}
.vt-card--dark{ background: var(--vt-ink); border-color: var(--vt-ink); color: var(--vt-paper); }
.vt-card__head{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.vt-card__note{ font-size: .875rem; color: var(--vt-muted); max-width: 68ch; }
.vt-card--dark .vt-card__note{ color: var(--vt-paper-70); }

/* ═══ Fields ═══ */
/* 240px, not 208: at a ~1000px content column the narrower track gave four
   fields a row and left a full-sentence placeholder a few pixels short. */
.vt-fields{ display: grid; gap: 16px 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.vt-field{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vt-label{
  font-family: var(--vt-font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--vt-muted);
}
/* Form controls carry .vt-calc in the selector (0-2-0) so neither the scoped
   reset above nor a host theme's own input/button rules can override them. */
.vt-calc .vt-input, .vt-calc .vt-select{
  width: 100%; padding: 9px 11px; background: var(--vt-paper);
  border: 1px solid var(--vt-line); border-radius: var(--vt-r-sm); box-shadow: none;
  font-size: .93rem; line-height: 1.4; height: auto; min-height: 0;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.vt-calc .vt-input{
  font-family: var(--vt-font-mono); font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
}
/* Placeholders are prose, not values. The mono face is for what gets typed;
   setting hint text in it made a full sentence too wide for its field. */
.vt-calc .vt-input::placeholder, .vt-calc .vt-select::placeholder{
  font-family: var(--vt-font-body, inherit); font-size: .9em;
  color: var(--vt-muted); opacity: 1;
}
.vt-calc .vt-input--text{ font-family: var(--vt-font-body, inherit); }
.vt-calc .vt-select{
  appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E706E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.vt-calc .vt-input:hover, .vt-calc .vt-select:hover{ border-color: #C6C8C6; }
.vt-calc .vt-input:focus, .vt-calc .vt-select:focus{
  outline: none; border-color: var(--vt-accent); box-shadow: 0 0 0 3px rgba(255,82,14,.14);
}
.vt-hint{ font-size: .755rem; color: var(--vt-muted); }

/* Yes/No pill switch, replacing the workbook's dropdown */
.vt-switch{ display: inline-flex; padding: 3px; background: var(--vt-surface); border: 1px solid var(--vt-line); border-radius: 999px; }
.vt-calc .vt-switch button{
  padding: 5px 15px; border-radius: 999px; font-family: var(--vt-font-mono);
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vt-muted);
  background: none; border: 0; transition: background .12s ease, color .12s ease;
}
.vt-calc .vt-switch button[aria-pressed="true"]{ background: var(--vt-ink); color: var(--vt-paper); }

/* ═══ Materials table ═══ */
/* min-width:0 is required: these are flex/grid children, whose default
   min-width:auto would otherwise let the 1060px table push the whole page wide. */
/* position:relative keeps the absolutely-positioned <caption class="vt-sr">
   inside this scroll container — otherwise it escapes and widens the page. */
.vt-tablewrap{ overflow-x: auto; padding-bottom: 4px; min-width: 0; position: relative; }
.vt-table{ width: 100%; border-collapse: collapse; min-width: 1080px; }
.vt-table th{
  text-align: left; padding: 0 6px 9px; font-family: var(--vt-font-mono);
  font-size: .655rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vt-muted); white-space: nowrap; border-bottom: 1px solid var(--vt-line);
}
.vt-table th.vt-num, .vt-table td.vt-num{ text-align: right; }
.vt-table td{ padding: 7px 6px; border-bottom: 1px solid var(--vt-line-soft); vertical-align: middle; }
/* Slightly tighter controls inside the table so no option label truncates */
.vt-calc .vt-table .vt-input, .vt-calc .vt-table .vt-select{ font-size: .84rem; padding: 8px 9px; }
.vt-calc .vt-table .vt-select{ padding-right: 26px; background-position: right 8px center; }

/* Column widths above are in px, but the text inside them is set in the host
   theme's face at the host's root font size — so a wider or larger theme font
   clipped values that fitted here. These floors are in ch, which measures in
   the field's OWN font, so the column grows to fit whatever face the theme
   turns out to use. The table scrolls inside its wrapper, so growing is always
   safe; clipping never is.

   A <select> needs this more than an input does, and gets it less obviously: a
   too-narrow select silently truncates its option text and reports no overflow
   at all, so "Coarse Aggregate" becomes "Coar" with nothing to detect. Each
   one is floored against its own longest option, plus room for the chevron. */
.vt-calc .vt-table .vt-input{ min-width: 9.5ch; }
.vt-calc .vt-table .vt-input--text{ min-width: 15ch; }
.vt-calc .vt-table .vt-w-cat  .vt-select{ min-width: calc(16ch + 42px); }  /* Coarse Aggregate */
.vt-calc .vt-table .vt-w-unit .vt-select{ min-width: calc(14ch + 42px); }  /* $/metric tonne   */
.vt-calc .vt-qtable .vt-input{ min-width: 8ch; }
.vt-calc .vt-mtable .vt-input{ min-width: 6.5ch; }
.vt-calc .vt-btable .vt-input, .vt-calc .vt-stable .vt-input{ min-width: 6ch; }
.vt-calc .vt-fields .vt-select{ min-width: 9ch; }

/* Spinner arrows sit inside the content box and take 15-17px from every
   numeric field — width these tables cannot spare, for a control nobody
   nudges a batch weight with. The value is typed, so drop them. */
.vt-calc .vt-input[type=number]{ appearance: textfield; -moz-appearance: textfield; }
.vt-calc .vt-input[type=number]::-webkit-outer-spin-button,
.vt-calc .vt-input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.vt-table tr.is-off td{ opacity: .42; }
.vt-table tr.is-off td:first-child{ opacity: 1; }
.vt-table tbody tr:hover td{ background: #FAFAFA; }
.vt-cell-cost{ font-family: var(--vt-font-mono); font-size: .9rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-w-use   { width: 40px; }
.vt-w-cat   { width: 150px; }
.vt-w-qty   { width: 98px; }
.vt-w-unit  { width: 134px; }
.vt-w-price { width: 100px; }
.vt-w-sg    { width: 82px; }
.vt-w-cost  { width: 100px; }
.vt-w-del   { width: 30px; }

.vt-check{ display: grid; place-items: center; width: 22px; height: 22px; }
.vt-check input{ width: 17px; height: 17px; accent-color: var(--vt-accent); cursor: pointer; }
.vt-calc .vt-del{
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px;
  background: none; border: 0; color: var(--vt-muted); font-size: 1.05rem; line-height: 1;
  transition: background .12s, color .12s;
}
.vt-calc .vt-del:hover{ background: #FBE9E4; color: #A3300F; }

.vt-table__foot{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }

/* Marks the Limelight row without stealing width from the name column */
.vt-table tr.is-vt td:first-child{ box-shadow: inset 3px 0 0 var(--vt-accent); }

/* Fixed product facts — shown as values, not fields */
.vt-table td.vt-fixed{
  font-family: var(--vt-font-mono); font-size: .84rem; color: var(--vt-ink-70);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vt-table td.vt-fixed span{ display: inline-flex; align-items: center; gap: 5px; }
.vt-lock{ color: var(--vt-accent); flex: none; }

/* ═══ Aggregate moisture / batch sheet ═══════════════════════════════ */
.vt-moist{
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--vt-line);
  display: flex; flex-direction: column; gap: 16px;
}
.vt-moist__head{ display: flex; flex-direction: column; gap: 6px; }
.vt-moist__t{ font-family: var(--vt-font-display, inherit); font-weight: 600; font-size: 1.02rem; }
.vt-moist__p{ font-size: .89rem; color: var(--vt-ink-70); max-width: 74ch; }
/* Own scroll container: the phone breakpoint rewrites .vt-tablewrap for the
   main materials table, and must not touch this one. */
.vt-mwrap{ overflow-x: auto; min-width: 0; position: relative; padding-bottom: 4px; }
.vt-mtable{ width: 100%; border-collapse: collapse; min-width: 660px; }
.vt-mtable th{
  text-align: left; padding: 0 8px 8px; font-family: var(--vt-font-mono);
  font-size: .625rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vt-muted); white-space: nowrap; border-bottom: 1px solid var(--vt-line);
}
.vt-mtable th.vt-num, .vt-mtable td.vt-num{ text-align: right; }
.vt-mtable td{ padding: 8px; border-bottom: 1px solid var(--vt-line-soft); vertical-align: middle; }
.vt-mtable tbody tr:last-child td{ border-bottom: 0; }
.vt-mtable .vt-mname{ font-size: .9rem; font-weight: 500; }
.vt-mtable .vt-mcat{
  font-family: var(--vt-font-mono); font-size: .6rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--vt-muted); display: block;
}
.vt-mtable td.vt-mout{
  font-family: var(--vt-font-mono); font-size: .86rem; font-variant-numeric: tabular-nums;
  color: var(--vt-ink-70); white-space: nowrap;
}
.vt-mtable td.vt-mfree{ font-weight: 600; color: var(--vt-ink); }
.vt-mtable td.vt-mstate{
  font-family: var(--vt-font-body, inherit); font-size: .78rem;
  color: var(--vt-muted); white-space: normal; min-width: 150px;
}
.vt-mtable .vt-w-pct{ width: 104px; }
.vt-calc .vt-mtable .vt-input{ font-size: .84rem; padding: 7px 9px; }

.vt-batch{
  background: var(--vt-ink); color: var(--vt-paper); border-radius: var(--vt-r-sm);
  padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: baseline;
}
.vt-batch__i{ display: flex; flex-direction: column; gap: 2px; }
.vt-batch__k{
  font-family: var(--vt-font-mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vt-paper-70);
}
.vt-batch__v{
  font-family: var(--vt-font-mono); font-size: 1.05rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.vt-batch__v--hero{ color: var(--vt-accent); font-size: 1.3rem; }
.vt-batch__note{ flex: 1 1 260px; font-size: .82rem; color: var(--vt-paper-70); min-width: 0; }

.vt-basis{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.vt-basis__k{
  font-family: var(--vt-font-mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vt-muted);
}

/* ═══ Product note ═══════════════════════════════════════════════════
   Two states: a suggestion when Limelight is not in the mix, and a
   confirmation once it is. Never blocks the calculator either way. */
.vt-promo{
  display: grid; gap: 20px; align-items: start;
  background: var(--vt-paper); border: 1px solid var(--vt-line);
  border-left: 3px solid var(--vt-accent);
  border-radius: var(--vt-r); padding: clamp(18px, 2.2vw, 26px);
}
@media (min-width: 860px){
  .vt-promo{ grid-template-columns: minmax(0,1fr) auto; gap: 36px; align-items: center; }
}
.vt-promo--in{ border-left-color: var(--vt-ok); }
.vt-promo__body{ display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vt-promo__t{
  font-family: var(--vt-font-display, inherit); font-weight: 600;
  font-size: 1.1rem; letter-spacing: -.01em; line-height: 1.3;
}
.vt-promo__p{ font-size: .92rem; color: var(--vt-ink-70); max-width: 62ch; }
.vt-promo__list{ display: flex; flex-wrap: wrap; gap: 5px 22px; margin-top: 2px; }
.vt-promo__list li{ font-size: .865rem; color: var(--vt-ink-70); display: flex; gap: 7px; }
.vt-promo__list li::before{ content: "+"; color: var(--vt-accent); font-weight: 600; flex: none; }
.vt-promo__meta{
  font-family: var(--vt-font-mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vt-muted); margin-top: 2px;
}
.vt-promo__side{ display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
@media (min-width: 860px){ .vt-promo__side{ align-items: flex-end; text-align: right; } }
.vt-promo__figk{
  font-family: var(--vt-font-mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vt-muted);
}
.vt-promo__fig{
  font-family: var(--vt-font-mono); font-variant-numeric: tabular-nums;
  font-size: 1.55rem; font-weight: 600; line-height: 1.1;
}
.vt-promo__ok{ display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 1.05rem; color: var(--vt-ok); }
.vt-promo__ok svg{ flex: none; }
.vt-calc .vt-linkbtn{
  font-family: var(--vt-font-mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vt-muted); background: none; border: 0;
  padding: 2px 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.vt-calc .vt-linkbtn:hover{ color: var(--vt-ink); }
.vt-todo{
  font-family: var(--vt-font-mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vt-warn); background: var(--vt-warn-bg);
  border-radius: 4px; padding: 1px 6px; margin-right: 6px; white-space: nowrap;
}

/* ═══ Buttons ═══ */
.vt-calc .vt-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 22px; border: 0; border-radius: 999px; background: none;
  font-family: var(--vt-font-mono); font-size: .73rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; text-decoration: none;
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .08s ease;
}
.vt-calc .vt-btn:active{ transform: translateY(1px); }
.vt-calc .vt-btn--primary{ background: var(--vt-accent); color: #FFF; }
.vt-calc .vt-btn--primary:hover{ background: #E5480C; color: #FFF; }
.vt-calc .vt-btn--ghost{ border: 1px solid var(--vt-line); color: var(--vt-ink); }
.vt-calc .vt-btn--ghost:hover{ border-color: var(--vt-ink); background: var(--vt-surface); }
.vt-calc .vt-btn--onDark{ border: 1px solid rgba(255,255,255,.32); color: var(--vt-paper); }
.vt-calc .vt-btn--onDark:hover{ border-color: var(--vt-paper); background: rgba(255,255,255,.09); }
.vt-calc .vt-btn[disabled]{ opacity: .45; cursor: not-allowed; }
.vt-btn__br{ color: var(--vt-accent); }
.vt-calc .vt-btn--primary .vt-btn__br{ color: rgba(255,255,255,.65); }

/* ═══ Cost summary (dark band, echoing the /developers/ section) ═══ */
.vt-total{ display: grid; gap: 26px; align-items: center; }
@media (min-width: 760px){ .vt-total{ grid-template-columns: minmax(260px, auto) 1fr; gap: 48px; } }
.vt-total__main{ display: flex; flex-direction: column; gap: 2px; }
.vt-total__k{ font-family: var(--vt-font-mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--vt-paper-70); }
.vt-total__v{
  font-family: var(--vt-font-mono); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 1.6rem + 4vw, 4.1rem); line-height: 1; color: var(--vt-accent); letter-spacing: -.02em;
}
.vt-total__sub{ font-family: var(--vt-font-mono); font-size: 1rem; color: var(--vt-paper); font-variant-numeric: tabular-nums; }

.vt-ledger{ display: flex; flex-direction: column; gap: 0; }
.vt-ledger__row{
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px 18px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.13);
}
.vt-ledger__row:last-child{ border-bottom: 0; }
.vt-ledger__row.is-total{ border-top: 1px solid rgba(255,255,255,.3); margin-top: 4px; padding-top: 13px; }
.vt-ledger__k{ font-size: .875rem; color: var(--vt-paper-70); }
.vt-ledger__row.is-total .vt-ledger__k{ color: var(--vt-paper); font-weight: 500; }
.vt-ledger__v{
  font-family: var(--vt-font-mono); font-size: .93rem; font-variant-numeric: tabular-nums;
  min-width: 92px; text-align: right;
}
.vt-ledger__v--m3{ color: var(--vt-paper-45); min-width: 96px; }
.vt-ledger__row.is-total .vt-ledger__v{ font-size: 1.06rem; font-weight: 600; }

/* ═══ Cost contribution — horizontal bars, one measure, one hue ═══ */
.vt-bars{ display: flex; flex-direction: column; gap: 11px; }
.vt-bar{ display: grid; grid-template-columns: minmax(120px, 1.35fr) minmax(0, 3fr) auto; gap: 14px; align-items: center; }
.vt-bar__name{ min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vt-bar__label{ font-size: .87rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-bar__cat{ font-family: var(--vt-font-mono); font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; color: var(--vt-muted); }
/* Both are <span>s — blockify them explicitly, or width/height never apply */
.vt-bar__track{ display: block; height: 12px; background: #EDEEED; border-radius: 3px; overflow: hidden; }
.vt-bar__fill{
  display: block; height: 100%; background: var(--vt-accent); border-radius: 0 4px 4px 0;
  transition: width .3s cubic-bezier(.4,0,.2,1); min-width: 2px;
}
.vt-bar__val{
  font-family: var(--vt-font-mono); font-size: .84rem; font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: right; min-width: 128px;
}
.vt-bar__pct{ color: var(--vt-muted); }
@media (prefers-reduced-motion: reduce){ .vt-bar__fill{ transition: none; } }
@media (max-width: 560px){
  .vt-bar{ grid-template-columns: 1fr auto; grid-template-areas: "name val" "track track"; row-gap: 6px; }
  .vt-bar__name{ grid-area: name; } .vt-bar__val{ grid-area: val; } .vt-bar__track{ grid-area: track; }
}

/* ═══ Stat grid ═══ */
.vt-stats{ display: grid; gap: 1px; background: var(--vt-line); border: 1px solid var(--vt-line); border-radius: var(--vt-r-sm); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.vt-stat{ background: var(--vt-paper); padding: 15px 16px; display: flex; flex-direction: column; gap: 3px; }
.vt-stat__k{ font-family: var(--vt-font-mono); font-size: .645rem; letter-spacing: .1em; text-transform: uppercase; color: var(--vt-muted); }
.vt-stat__v{ font-family: var(--vt-font-mono); font-size: 1.32rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.vt-stat__u{ font-size: .78rem; font-weight: 400; color: var(--vt-muted); margin-left: 3px; }
.vt-stat__note{ font-size: .73rem; color: var(--vt-muted); }

/* ═══ Chips ═══ */
.vt-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.vt-chip{
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 10px;
  border-radius: 999px; font-size: .785rem; line-height: 1.3;
}
.vt-chip__dot{ width: 7px; height: 7px; border-radius: 50%; flex: none; }
.vt-chip--ok{ background: var(--vt-ok-bg); color: var(--vt-ok); }
.vt-chip--ok .vt-chip__dot{ background: var(--vt-ok); }
.vt-chip--warn{ background: var(--vt-warn-bg); color: var(--vt-warn); }
.vt-chip--warn .vt-chip__dot{ background: var(--vt-warn); }

/* ═══ Slump ═══ */
.vt-slump{ display: grid; gap: 26px; }
@media (min-width: 900px){ .vt-slump{ grid-template-columns: minmax(0,1fr) 296px; gap: 34px; } }
.vt-slump__out{
  background: var(--vt-ink); color: var(--vt-paper); border-radius: var(--vt-r);
  padding: 24px; display: flex; flex-direction: column; gap: 18px; align-self: start;
}
.vt-slump__v{ font-family: var(--vt-font-mono); font-size: 3rem; font-weight: 600; line-height: 1; color: var(--vt-accent); font-variant-numeric: tabular-nums; }
.vt-slump__mm{ font-family: var(--vt-font-mono); font-size: .93rem; color: var(--vt-paper-70); font-variant-numeric: tabular-nums; }
.vt-slump__meta{ display: flex; flex-direction: column; gap: 9px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.15); }
.vt-slump__mrow{ display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; }
.vt-slump__mk{ color: var(--vt-paper-70); }
.vt-slump__mv{ font-family: var(--vt-font-mono); font-variant-numeric: tabular-nums; }

/* ═══ Lead gate ═══ */
.vt-gate{ background: var(--vt-paper); border: 1px solid var(--vt-line); border-radius: var(--vt-r); padding: clamp(20px, 2.4vw, 30px); }
.vt-gate__grid{ display: grid; gap: 24px; }
@media (min-width: 860px){ .vt-gate__grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; } }
.vt-form{ display: flex; flex-direction: column; gap: 14px; }
.vt-consent{ display: flex; gap: 10px; align-items: flex-start; font-size: .795rem; color: var(--vt-muted); line-height: 1.45; }
.vt-consent input{ margin-top: 2px; width: 15px; height: 15px; accent-color: var(--vt-accent); flex: none; cursor: pointer; }
.vt-consent--note{ display: block; margin-top: 12px; max-width: 46ch; }
.vt-hint--bad{ color: var(--vt-accent); }
.vt-consent a{ color: var(--vt-ink); text-underline-offset: 2px; }
.vt-err{ font-size: .78rem; color: #A3300F; min-height: 1em; }
.vt-done{ display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.vt-done__msg{ display: flex; align-items: center; gap: 9px; font-size: .93rem; font-weight: 500; color: var(--vt-ok); }

/* ═══ Footnote ═══ */
.vt-note{ font-size: .79rem; color: var(--vt-muted); line-height: 1.6; max-width: 84ch; }
.vt-note strong{ color: var(--vt-ink); font-weight: 600; }
.vt-note a{ color: var(--vt-ink); text-underline-offset: 2px; }
.vt-refs{ display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
.vt-refs a{ font-family: var(--vt-font-mono); font-size: .69rem; letter-spacing: .07em; text-transform: uppercase; color: var(--vt-muted); text-decoration: none; border-bottom: 1px solid var(--vt-line); padding-bottom: 1px; }
.vt-refs a:hover{ color: var(--vt-ink); border-color: var(--vt-ink); }

.vt-sr{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Very narrow phones: stack the per-m³ figure under the per-yd³ one */
@media (max-width: 400px){
  .vt-ledger__row{ grid-template-columns: 1fr auto; row-gap: 2px; }
  .vt-ledger__v{ min-width: 0; }
  .vt-ledger__v--m3{ grid-column: 2; min-width: 0; font-size: .8rem; }
  .vt-bar__val{ min-width: 0; }
  .vt-batch{ gap: 12px 16px; padding: 14px; }
  .vt-promo{ padding: 16px; }
  .vt-promo__list{ flex-direction: column; gap: 6px; }
  .vt-promo__list li{ min-width: 0; }
  .vt-promo__body{ min-width: 0; overflow-wrap: anywhere; }
  .vt-promo__side{ min-width: 0; width: 100%; }
  .vt-batch__v--hero{ font-size: 1.15rem; }
  .vt-basis{ gap: 8px 10px; }
}

/* Phones: let button labels wrap and fill the row, so nothing can overflow */
@media (max-width: 520px){
  .vt-btn{ white-space: normal; text-align: center; padding-left: 18px; padding-right: 18px; letter-spacing: .09em; }
  .vt-table__foot .vt-btn, .vt-done .vt-btn, .vt-form .vt-btn{ width: 100%; justify-content: center; }
  .vt-dock__row{ padding: 10px 16px; gap: 8px 18px; }
  .vt-dock .vt-btn{ padding: 8px 14px; }
}

/* Stacked cards under 900px — the table is unreadable at phone widths */
@media (max-width: 899px){
  .vt-tablewrap{ overflow: visible; margin: 0; padding: 0; }
  .vt-table{ min-width: 0; }
  .vt-table thead{ display: none; }
  .vt-table, .vt-table tbody, .vt-table tr, .vt-table td{ display: block; width: auto; }
  .vt-table tr{ position: relative; border: 1px solid var(--vt-line); border-radius: var(--vt-r-sm); padding: 12px; margin-bottom: 12px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .vt-table tr:hover td{ background: none; }
  .vt-table td{ border: 0; padding: 0; }
  .vt-table td::before{
    content: attr(data-l); display: block; margin-bottom: 4px;
    font-family: var(--vt-font-mono); font-size: .625rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--vt-muted);
  }
  .vt-td-name{ grid-column: 1 / -1; }
  .vt-td-use{ display: flex !important; align-items: center; gap: 9px; }
  .vt-td-use::before{ margin-bottom: 0; }
  .vt-td-cost{ grid-column: 1 / 2; padding-top: 10px !important; border-top: 1px solid var(--vt-line-soft) !important; }
  .vt-td-del{ grid-column: 2 / 3; justify-self: end; align-self: center; padding-top: 10px !important; border-top: 1px solid var(--vt-line-soft) !important; }
  .vt-td-del::before{ display: none; }
  .vt-table tr.is-vt{ border-left: 3px solid var(--vt-accent); }
  .vt-table tr.is-vt td:first-child{ box-shadow: none; }
  .vt-w-use, .vt-w-cat, .vt-w-qty, .vt-w-unit, .vt-w-price, .vt-w-sg, .vt-w-cost, .vt-w-del{ width: auto; }
  .vt-table td.vt-num{ text-align: left; }
}


/* ═══ PRO TIER ══════════════════════════════════════════════════════ */
.vt-acct{ background: var(--vt-ink); color: var(--vt-paper); }
.vt-acct__row{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 11px 20px; }
.vt-acct__who{ font-size: .88rem; }
.vt-acct__who b{ font-weight: 600; }
.vt-acct__badge{
  font-family: var(--vt-font-mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; background: var(--vt-accent); color: #FFF;
  padding: 2px 8px; border-radius: 999px; font-weight: 600;
}
.vt-calc .vt-acct .vt-linkbtn{ color: var(--vt-paper-70); }
.vt-calc .vt-acct .vt-linkbtn:hover{ color: var(--vt-paper); }

/* target vs actual */
.vt-tgt{ display: grid; gap: 1px; background: var(--vt-line); border: 1px solid var(--vt-line);
  border-radius: var(--vt-r-sm); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); }
.vt-tgt__c{ background: var(--vt-paper); padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
.vt-tgt__k{ font-family: var(--vt-font-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vt-muted); }
.vt-tgt__row{ display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.vt-tgt__v{ font-family: var(--vt-font-mono); font-size: 1.16rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.vt-tgt__t{ font-family: var(--vt-font-mono); font-size: .78rem; color: var(--vt-muted); }
.vt-tgt__c .vt-chip{ align-self: flex-start; }

/* saved mixes + library */
.vt-list{ display: flex; flex-direction: column; gap: 9px; }
.vt-li{ display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--vt-line); border-radius: var(--vt-r-sm); background: var(--vt-paper); }
.vt-li:hover{ border-color: #C6C8C6; }
.vt-li__n{ font-weight: 500; font-size: .95rem; }
.vt-li__m{ font-family: var(--vt-font-mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--vt-muted); text-transform: uppercase; }
.vt-li__a{ display: flex; gap: 12px; align-items: center; }

/* logo upload */
.vt-logo{ display: grid; gap: 18px; min-width: 0; }
.vt-logo > *{ min-width: 0; }
@media (min-width: 780px){ .vt-logo{ grid-template-columns: 260px minmax(0,1fr); gap: 28px; } }
.vt-logo__drop{
  border: 1.5px dashed var(--vt-line); border-radius: var(--vt-r-sm); padding: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  background: var(--vt-surface); transition: border-color .12s ease;
}
.vt-logo__drop:hover{ border-color: var(--vt-accent); }
.vt-logo__prev{ max-width: 100%; max-height: 54px; object-fit: contain; }
.vt-logo__hint{ font-size: .78rem; color: var(--vt-muted); }
.vt-letter{ border: 1px solid var(--vt-line); border-radius: var(--vt-r-sm); background: #FFF; padding: 20px 22px; }
.vt-letter__top{ display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
  padding-bottom: 14px; border-bottom: 2px solid var(--vt-ink); }
.vt-letter__logo{ max-height: 34px; max-width: 190px; object-fit: contain; }
.vt-letter__ph{ font-family: var(--vt-font-mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vt-muted); border: 1px dashed var(--vt-line);
  padding: 9px 14px; border-radius: 5px; }
.vt-letter__t{ font-family: var(--vt-font-display, inherit); font-weight: 600; font-size: 1.02rem; color: #363836; text-align: right; }
.vt-letter__s{ font-family: var(--vt-font-mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vt-muted); text-align: right; margin-top: 3px; }
.vt-letter__grid{ display: grid; gap: 10px 26px; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); margin-top: 15px; }
.vt-letter__f{ display: flex; flex-direction: column; }
.vt-letter__fk{ font-family: var(--vt-font-mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vt-muted); }
.vt-letter__fv{ font-size: .88rem; color: #363836; }

/* QC */
/* min-width:0 again: grid children default to min-content, which lets the
   520px QC table push the whole page wide instead of scrolling. */
.vt-qc{ display: grid; gap: 26px; min-width: 0; }
.vt-qc > *{ min-width: 0; }
/* Side by side only once the break table's own 620px minimum actually fits
   beside the chart. At the old 940px breakpoint the chart took a fixed 400px
   and left the table short, so section 13 carried a sideways scrollbar on any
   normal content column. */
@media (min-width: 1080px){ .vt-qc{ grid-template-columns: minmax(620px,1fr) 360px; gap: 32px; } }
.vt-qtable{ width: 100%; border-collapse: collapse; min-width: 620px; }
.vt-qtable th{ text-align: left; padding: 0 7px 8px; font-family: var(--vt-font-mono);
  font-size: .615rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vt-muted); white-space: nowrap; border-bottom: 1px solid var(--vt-line); }
.vt-qtable th.vt-num, .vt-qtable td.vt-num{ text-align: right; }
.vt-qtable td{ padding: 7px; border-bottom: 1px solid var(--vt-line-soft); }
.vt-qtable tbody tr:last-child td{ border-bottom: 0; }
.vt-qtable td.vt-qout{ font-family: var(--vt-font-mono); font-size: .86rem;
  font-variant-numeric: tabular-nums; color: var(--vt-ink-70); white-space: nowrap; }
.vt-qtable td.vt-qpct{ font-weight: 600; color: var(--vt-ink); }
.vt-qtable .vt-w-age{ width: 88px; }
.vt-qtable .vt-w-cyl{ width: 106px; }
.vt-calc .vt-qtable .vt-input{ font-size: .84rem; padding: 7px 9px; }
.vt-chartwrap{ background: var(--vt-paper); border: 1px solid var(--vt-line);
  border-radius: var(--vt-r-sm); padding: 16px 14px 10px; }
.vt-chartwrap svg{ display: block; width: 100%; height: auto; }
.vt-chart__cap{ font-size: .78rem; color: var(--vt-muted); margin-top: 8px; padding: 0 4px; }

/* ═══ Surface evaporation, ACI 305 ═══════════════════════════════════ */
.vt-evap{ display: grid; gap: 22px; margin-bottom: 22px; }
@media (min-width: 760px){ .vt-evap{ grid-template-columns: minmax(0,1fr) minmax(0,260px); gap: 30px; } }
.vt-evap__hero{
  background: var(--vt-ink); color: var(--vt-paper);
  border-radius: var(--vt-r-sm); padding: 20px 22px;
}
.vt-evap__hero .vt-total__k{ color: var(--vt-paper-70); }
.vt-evap__hero .vt-slump__mm{ color: var(--vt-paper-70); }
.vt-evap__note{ font-size: .82rem; color: var(--vt-paper-70); margin-top: 12px; max-width: 46ch; }
.vt-evap__big{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vt-evap__u{
  font-family: var(--vt-font-mono); font-size: .78rem; letter-spacing: .06em;
  color: var(--vt-paper-70);
}
/* Its own keys and values: the slump panel's are white, for a dark card. */
.vt-evap__meta{ display: flex; flex-direction: column; gap: 11px; align-self: center; }
.vt-emrow{
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--vt-line-soft);
}
.vt-emk{ font-size: .8rem; color: var(--vt-muted); }
.vt-emv{
  font-family: var(--vt-font-mono); font-size: .86rem; font-variant-numeric: tabular-nums;
  color: var(--vt-ink); text-align: right; white-space: nowrap;
}
.vt-emhot{ font-size: .8rem; color: var(--vt-ink-70); }
.vt-evap__gt{
  font-family: var(--vt-font-mono); font-size: .62rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--vt-muted); margin-bottom: 8px;
}
/* Severity reads as a ramp, so a glance at the colour is enough. */
.vt-chip--hot{ background: #FDE7DE; color: #A8330A; }
.vt-chip--hot .vt-chip__dot{ background: #A8330A; }
.vt-chip--sev{ background: #A8330A; color: #FFF; }
.vt-chip--sev .vt-chip__dot{ background: #FFF; }
.vt-chip--cold{ background: #E4EEF2; color: #05454F; }
.vt-chip--cold .vt-chip__dot{ background: #05454F; }

.vt-grid-wrap{ overflow-x: auto; min-width: 0; }
.vt-gtable{ border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vt-gtable th{
  font-family: var(--vt-font-mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--vt-muted);
  padding: 0 10px 7px; white-space: nowrap; text-align: right;
}
.vt-gtable th:first-child{ text-align: left; }
.vt-gtable td{
  font-family: var(--vt-font-mono); font-size: .8rem; text-align: right;
  padding: 6px 10px; border-top: 1px solid var(--vt-line-soft); white-space: nowrap;
}
.vt-gtable td:first-child{
  text-align: left; color: var(--vt-muted); font-size: .68rem; letter-spacing: .06em;
}
.vt-gtable td.vt-g1{ background: #FBF1DE; }               /* above 0.5 */
.vt-gtable td.vt-g2{ background: #FDE7DE; color: #A8330A; }/* above 1.0 */
.vt-gtable td.vt-g3{ background: #A8330A; color: #FFF; }   /* above 1.5 */
.vt-gtable td.vt-gnow{ outline: 2px solid var(--vt-accent); outline-offset: -2px; font-weight: 600; }

/* The "remember this" line under Prepared for. Sits with the field rather
   than beside it, so the grid column keeps its width. */
.vt-remember{
  display: flex; align-items: center; gap: 7px; margin-top: 7px;
  font-size: .765rem; color: var(--vt-muted); cursor: pointer;
}
.vt-calc .vt-remember input{
  width: 14px; height: 14px; margin: 0; flex: none;
  accent-color: var(--vt-accent); cursor: pointer;
}
.vt-remember span{ min-width: 0; }

/* ═══ Combined aggregate gradation ═══════════════════════════════════ */
.vt-gwrap{ overflow-x: auto; min-width: 0; padding-bottom: 4px; }
.vt-btable, .vt-stable{ width: 100%; border-collapse: collapse; }
.vt-btable{ min-width: 560px; }
.vt-stable{ min-width: 680px; }
.vt-btable th, .vt-stable th{
  text-align: right; padding: 0 8px 8px; font-family: var(--vt-font-mono);
  font-size: .615rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
  color: var(--vt-muted); white-space: nowrap; border-bottom: 1px solid var(--vt-line);
}
.vt-btable th:first-child, .vt-stable th:first-child{ text-align: left; }
.vt-btable td, .vt-stable td{
  padding: 7px 8px; border-bottom: 1px solid var(--vt-line-soft);
  text-align: right; vertical-align: middle;
  font-family: var(--vt-font-mono); font-size: .84rem; font-variant-numeric: tabular-nums;
  color: var(--vt-ink-70); white-space: nowrap;
}
.vt-btable td:first-child, .vt-stable td:first-child{
  text-align: left; font-family: var(--vt-font-body, inherit); font-size: .88rem;
  color: var(--vt-ink); white-space: normal;
}
.vt-btable tbody tr:last-child td, .vt-stable tbody tr:last-child td{ border-bottom: 0; }
.vt-btable .vt-bname{ font-weight: 500; }
.vt-btable .vt-bcat{
  font-family: var(--vt-font-mono); font-size: .58rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--vt-muted); display: block;
}
.vt-calc .vt-btable .vt-input, .vt-calc .vt-stable .vt-input{
  font-size: .82rem; padding: 6px 8px; width: 80px;
}
.vt-btable .vt-w-ov{ width: 104px; }
/* The aggregate headings name the kind of aggregate, which is longer than a
   short material name, so they wrap over two or three lines instead of being
   cut off. The rest of the row stays on one line. */
.vt-calc .vt-stable th.vt-sagg{
  white-space: normal; min-width: 98px; max-width: 136px;
  line-height: 1.35; vertical-align: bottom; hyphens: none;
}
.vt-stable .vt-scomb{ color: var(--vt-ink); font-weight: 600; }
.vt-stable .vt-slim{ font-size: .74rem; color: var(--vt-muted); }
.vt-stable tr.vt-sbad td{ background: var(--vt-warn-bg); }
.vt-stable tr.vt-sbad td:first-child{ color: var(--vt-warn); }
.vt-sflag{
  display: block; font-family: var(--vt-font-body, inherit); font-size: .74rem;
  color: var(--vt-warn); white-space: normal; max-width: 34ch;
}
.vt-sok, .vt-sover, .vt-sunder{
  font-family: var(--vt-font-mono); font-size: .6rem; letter-spacing: .09em;
  text-transform: uppercase;
}
.vt-sok{ color: var(--vt-ok); }
.vt-sover, .vt-sunder{ color: var(--vt-warn); font-weight: 600; }

.vt-crit{ display: grid; gap: 10px; margin-top: 22px; }
.vt-crit__i{
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
  padding: 12px 14px; border: 1px solid var(--vt-line); border-radius: var(--vt-r-sm);
  background: var(--vt-paper);
}
.vt-crit__n{ font-weight: 600; font-size: .92rem; flex: 1 1 190px; min-width: 0; }
.vt-crit__d{ flex: 1 1 100%; font-size: .8rem; color: var(--vt-muted); order: 3; }
.vt-crit__v{
  font-family: var(--vt-font-mono); font-size: .9rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.vt-crit__l{ font-family: var(--vt-font-mono); font-size: .72rem; color: var(--vt-muted); }
.vt-crit__i--pass{ border-left: 3px solid var(--vt-ok); }
.vt-crit__i--fail{ border-left: 3px solid var(--vt-warn); background: var(--vt-warn-bg); }
.vt-crit__i--none{ border-left: 3px solid var(--vt-line); }

.vt-verdict{
  margin-top: 18px; padding: 13px 16px; border-radius: var(--vt-r-sm);
  font-size: .92rem; font-weight: 500;
  background: var(--vt-ok-bg); color: var(--vt-ok);
}
.vt-verdict--warn{ background: var(--vt-warn-bg); color: var(--vt-warn); }
.vt-verdict--none{ background: var(--vt-surface); color: var(--vt-muted); font-weight: 400; }

/* ═══ Review checks ══════════════════════════════════════════════════ */
.vt-revs{ display: grid; gap: 0; margin-top: 18px; }
.vt-rev{
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--vt-line-soft);
}
.vt-revs .vt-rev:last-child{ border-bottom: 0; }
.vt-rev__s{
  font-family: var(--vt-font-mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px; flex: none;
  align-self: center;
}
.vt-rev__s--ok{ background: var(--vt-ok-bg); color: var(--vt-ok); }
.vt-rev__s--watch{ background: var(--vt-warn-bg); color: var(--vt-warn); }
.vt-rev__s--review{ background: #FDE7DE; color: #A8330A; font-weight: 600; }
.vt-rev__n{ flex: 1 1 220px; min-width: 0; font-size: .92rem; }
.vt-rev__v{
  font-family: var(--vt-font-mono); font-size: .86rem; font-variant-numeric: tabular-nums;
  color: var(--vt-ink); white-space: nowrap;
}
.vt-rev__note{ flex: 1 1 100%; font-size: .8rem; color: var(--vt-muted); order: 4; }
.vt-rev--review .vt-rev__note{ color: #A8330A; }

/* ═══ Section guide ═════════════════════════════════════════════════ */
/* The prompt in the first card. A line of text and a round button, not a
   panel — it has to be findable without competing with the answer below it. */
.vt-help{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .86rem; color: var(--vt-muted);
}
.vt-calc .vt-help__i{
  display: grid; place-items: center; width: 24px; height: 24px; flex: none;
  border-radius: 50%; border: 1.5px solid var(--vt-accent); background: none;
  color: var(--vt-accent); font-family: var(--vt-font-mono);
  font-size: .82rem; font-weight: 600; line-height: 1; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.vt-calc .vt-help__i:hover{ background: var(--vt-accent); color: var(--vt-paper); }

/* Native <dialog>: the browser gives us the backdrop, Escape and a focus
   trap, and the top layer keeps it clear of any theme ancestor that has a
   transform (which would otherwise capture a position:fixed overlay). */
.vt-calc .vt-guide{
  width: min(680px, calc(100vw - 32px)); max-height: min(82vh, 760px);
  padding: 0; border: 1px solid var(--vt-line); border-radius: var(--vt-r);
  background: var(--vt-paper); color: var(--vt-ink);
  box-shadow: 0 24px 60px -20px rgba(42,44,42,.35);
  font-family: var(--vt-font-body, inherit); font-size: 16px;
  overflow: hidden;
}
.vt-calc .vt-guide::backdrop{ background: rgba(42,44,42,.46); }
.vt-guide[open]{ display: flex; flex-direction: column; }
.vt-guide__bar{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border-bottom: 1px solid var(--vt-line); flex: none;
}
.vt-guide__title{
  font-family: var(--vt-font-display, inherit); font-weight: 600;
  font-size: 1.06rem; letter-spacing: -.01em; margin: 0;
}
.vt-calc .vt-guide__x{
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border: 0; border-radius: 8px; background: none; color: var(--vt-muted);
  font-size: 1.35rem; line-height: 1; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.vt-calc .vt-guide__x:hover{ background: var(--vt-surface); color: var(--vt-ink); }
.vt-guide__body{ overflow-y: auto; padding: 20px 22px 6px; min-height: 0; }
/* .vt-calc in the selector: the scoped reset zeroes every p margin at the
   same specificity, and would otherwise win on source order. */
.vt-calc .vt-guide__lede{
  font-size: .89rem; color: var(--vt-ink-70); margin-bottom: 22px; max-width: 62ch;
}
.vt-guide__s{ margin-bottom: 20px; }
.vt-guide__s h3{
  font-family: var(--vt-font-mono); font-size: .655rem; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; color: var(--vt-accent);
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--vt-line-soft);
}
.vt-guide__s ul{ display: grid; gap: 7px; }
.vt-guide__s li{
  position: relative; padding-left: 16px; font-size: .875rem;
  line-height: 1.5; color: var(--vt-ink-70);
}
.vt-guide__s li::before{
  content: "+"; position: absolute; left: 0; top: -1px;
  color: var(--vt-accent); font-family: var(--vt-font-mono); font-size: .8rem;
}
.vt-guide__s li b{ color: var(--vt-ink); font-weight: 600; }
.vt-guide__foot{
  display: flex; justify-content: flex-end; flex: none;
  padding: 14px 22px 18px; border-top: 1px solid var(--vt-line);
}
@media (max-width: 620px){
  .vt-calc .vt-guide{ width: 100vw; max-width: 100vw; max-height: 92vh; border-radius: var(--vt-r) var(--vt-r) 0 0; }
  .vt-guide__bar, .vt-guide__body, .vt-guide__foot{ padding-left: 18px; padding-right: 18px; }
}

/* ═══ Print / PDF ═══ */
@media print{
  .vt-calc{ background: #FFF; font-size: 11px; }
  .vt-dock, .vt-table__foot, .vt-gate, .vt-calc .vt-del, .vt-rail,
  .vt-calc .vt-btn, .vt-promo, .vt-help, .vt-guide{ display: none !important; }
  .vt-card, .vt-gate{ break-inside: avoid; border-color: #CCC; }
  .vt-card--dark, .vt-slump__out{ background: #FFF !important; color: #000 !important; border: 1px solid #333 !important; }
  .vt-card--dark .vt-card__note, .vt-total__k, .vt-ledger__k, .vt-slump__mk{ color: #444 !important; }
  .vt-total__v, .vt-slump__v{ color: #000 !important; }
  .vt-ledger__v--m3{ color: #666 !important; }
  .vt-eyebrow--light{ color: #000 !important; }
  .vt-calc .vt-input, .vt-calc .vt-select{ border: 0; padding: 0; background: none; box-shadow: none; }
  .vt-calc .vt-select{ appearance: none; background-image: none; }
  .vt-sections{ gap: 16px; }
  .vt-bar__fill{ background: #666 !important; }
}