/*
  /aiwj/tool-base.css — the part of the platform's design system the instant
  quote tool actually needs on a client's site, and nothing else.

  The tool's own stylesheet (/quote/quote.css) was written for the platform's
  pages, where /assets/css/main.css sets these custom properties and the box
  model. A client's site must NOT load main.css: it carries the platform's
  resets, its heading rules, .container, .hero and .btn, and on the first real
  remake it painted the hero headline the colour of its own background and
  collapsed a section grid to one word per line — at widths the local QA
  server, which stubbed the file, never saw. /quote/product.css is the
  platform's landing-page styling and nothing the embedded tool renders uses
  it, so it goes too.

  So this file defines the properties with the platform's defaults and stops.
  A site sets --gold, --gold-dark and --green to its brand in its own
  stylesheet, which loads after this one and wins (reference/tool-tokens.css).
*/

:root {
  --gold: #0d9488;
  --gold-dark: #0b7d73;
  --green: #102a43;
  --ink: #000;
  --body: #555;
  --line: #ddd;
  --paper: #fff;
  --mist: #f7f7f7;
  --radius-card: 15px;
  --radius-btn: 10px;
  --container: 1200px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --shadow-card: 0 2px 14px rgba(0, 0, 0, .06);
}

/* The tool assumes the platform's box model. Scoped to the mount, so the
   page's own model stays its own business. */
#app,
#app *,
#app *::before,
#app *::after {
  box-sizing: border-box;
}

/* ---- The quote tool's "Your roof, measured" block ------------------------
   The satellite photo with the scanning beam, the corner marks and the
   "GUTTER: n m — MEASURED FROM ABOVE" chip that app.js draws on the price
   screen. These rules lived in the platform's product.css, which a client
   site never loads (widgets.md §3) — without them the photo ran full size and
   the marks floated below it. Copied from product.css 2026-09-17, with the platform teal replaced by
   the site's --aiwj-trace (the roof-trace widget's colour, tokens.css) so the
   tool's visual matches the site; refresh alongside vendor/quote.css if the
   tool changes them. ---- */
.hv { position: relative; height: 172px; border-radius: 12px; margin-top: 12px; overflow: hidden; background: #0b1f33; }
.hv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--aiwj-trace, #2dd4bf) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--aiwj-trace, #2dd4bf) 8%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
}
.hv-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hv-scan { animation: hv-scan 8s linear infinite; }
.hv-trace {
  fill: color-mix(in srgb, var(--aiwj-trace, #2dd4bf) 16%, transparent); fill-opacity: 0; stroke: var(--aiwj-trace, #2dd4bf); stroke-width: 3;
  stroke-linejoin: round; stroke-dasharray: 891;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--aiwj-trace, #2dd4bf) 75%, transparent));
  animation: hv-trace 8s linear infinite;
}
.hv-dim { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 6 4; }
.hv-dimtext { fill: #fff; font: 700 17px Figtree, system-ui, sans-serif; text-anchor: middle; paint-order: stroke; stroke: rgba(11,31,51,.85); stroke-width: 4px; }
.hv-node { fill: var(--aiwj-trace, #2dd4bf); stroke: #fff; stroke-width: 1.5; }
.hv-marks { opacity: 0; animation: hv-marks 8s linear infinite; }
.hv-chip {
  position: absolute; display: flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; color: #eafffb;
  background: rgba(11,31,51,.82); border: 1px solid color-mix(in srgb, var(--aiwj-trace, #2dd4bf) 50%, transparent);
  border-radius: 999px; padding: 4px 9px; opacity: 0; white-space: nowrap;
}
.hv-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--aiwj-trace, #2dd4bf); box-shadow: 0 0 6px var(--aiwj-trace, #2dd4bf); }
.hv-chip.c1 { top: 9px; left: 10px; animation: hv-c1 8s linear infinite; }
.hv-chip.c2 { top: 36px; left: 10px; animation: hv-c2 8s linear infinite; }
.hv-chip.c3 { top: 63px; left: 10px; animation: hv-c3 8s linear infinite; }
.hv-attr { position: absolute; right: 8px; bottom: 6px; font-size: 8px; color: rgba(255,255,255,.72); text-shadow: 0 1px 2px rgba(0,0,0,.65); }
@media (prefers-reduced-motion: reduce) {
  .hv-scan { display: none; }
  .hv-trace, .hv-marks, .hv-chip { animation: none; opacity: 1; }
  .hv-trace { stroke-dashoffset: 0; fill-opacity: 1; }
}
@keyframes hv-scan {
  0% { transform: translateX(-120px); opacity: 1; }
  26% { transform: translateX(650px); opacity: 1; }
  27%, 100% { transform: translateX(650px); opacity: 0; }
}
@keyframes hv-trace {
  0%, 5% { stroke-dashoffset: 891; fill-opacity: 0; opacity: 1; }
  33% { stroke-dashoffset: 0; fill-opacity: 0; }
  40%, 88% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; fill-opacity: 0; opacity: 0; }
}
@keyframes hv-marks { 0%, 31% { opacity: 0; } 38%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hv-c1 { 0%, 36% { opacity: 0; transform: translateY(4px); } 41%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes hv-c2 { 0%, 42% { opacity: 0; transform: translateY(4px); } 47%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes hv-c3 { 0%, 48% { opacity: 0; transform: translateY(4px); } 53%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }