/* Eugene's Exteriors — damage calculator styles (home widget, /quote/ tool, /q/ customer view).
 * Builds on tokens.css + styles.css. */
:root {
  --color-gold: oklch(66% 0.11 72);       /* the "one program year" line */
  --color-gold-soft: oklch(94% 0.035 80);
  --color-bar: oklch(40% 0.05 245);
}

/* ---- range chart ---- */
.rchart { width: 100%; height: auto; display: block; font-family: var(--font-body); }
.rc-grid { stroke: var(--color-line); stroke-width: 1; }
.rc-tick { font-size: 11px; fill: var(--color-ink-3); }
.rc-label { font-size: 12.5px; fill: var(--color-ink); }
.rc-val { font-size: 11.5px; fill: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.rc-bar { fill: var(--color-bar); }
/* halo so the program line never hides a label */
.rc-label, .rc-val, .rc-line-label { paint-order: stroke; stroke: oklch(98% 0.01 236); stroke-width: 4px; stroke-linejoin: round; }
.rc-line { stroke: var(--color-gold); stroke-width: 3; }
.rc-line-label { font-size: 12px; font-weight: 600; fill: oklch(52% 0.11 70); }

/* ---- shared bits ---- */
.total-box { display: grid; gap: .25rem; }
.total-box .k { font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--color-accent-deep); }
.total-box .big { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.8rem); letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.total-box .big { transition: color var(--dur-long) var(--ease-out); }
.total-box .big.has-cost { color: oklch(54% 0.2 27); }   /* damage red once there's a cost */
/* floating total on phones: shoots up from the bottom, hovers above the fold */
.float-total { position: fixed; z-index: 55; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: .8rem; text-align: left;
  padding: .75rem .9rem .75rem 1.1rem; border-radius: 20px; font: inherit; color: var(--color-ink); cursor: pointer;
  background: rgba(255,255,255,.9); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 18px 40px -14px rgba(20,50,80,.45), 0 4px 12px -6px rgba(20,50,80,.25);
  transform: translateY(calc(100% + 40px)); opacity: 0; visibility: hidden;
  transition: transform 460ms cubic-bezier(0.34, 1.45, 0.64, 1), opacity 200ms ease-out, visibility 0s linear 460ms; }
.float-total.show { transform: translateY(0); opacity: 1; visibility: visible;
  transition: transform 460ms cubic-bezier(0.34, 1.45, 0.64, 1), opacity 160ms ease-out, visibility 0s; }
.float-total .ft-text { display: grid; gap: 0; min-width: 0; }
.float-total .ft-k { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--color-accent-deep); }
.float-total .ft-num { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; line-height: 1.15; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; transition: color var(--dur-long) var(--ease-out); }
.float-total .ft-num.has-cost { color: oklch(54% 0.2 27); }
.float-total .ft-sub { font-size: var(--text-xs); color: var(--color-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.float-total .ft-go { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  color: #fff; background: linear-gradient(180deg, var(--color-accent-2), var(--color-accent)); }
@media (prefers-reduced-motion: reduce) { .float-total, .float-total.show { transition: opacity 120ms linear, visibility 0s; transform: none; } }
@media print { .float-total { display: none !important; } }

.total-box .sub { color: var(--color-ink-2); font-size: var(--text-sm); }
.vs { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; padding: .8rem 1rem; border-radius: var(--radius-input);
  background: var(--color-gold-soft); border: 1px solid oklch(86% 0.06 78); }
.vs b { font-family: var(--font-display); font-size: var(--text-lg); }
.vs span { color: var(--color-ink-2); font-size: var(--text-sm); }
.fine { font-size: var(--text-xs); color: var(--color-ink-3); line-height: 1.5; }
.empty-hint { color: var(--color-ink-3); font-size: var(--text-sm); padding: 1.2rem 0; }

/* ---- home page widget ---- */
.dmg { margin-top: var(--space-xl); padding: clamp(1.3rem, 4vw, 2.2rem); display: grid; gap: var(--space-lg); }
.dmg h3 { font-size: var(--text-xl); }
.dmg-qs { display: grid; gap: .55rem; }
.chk { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--radius-input);
  background: rgba(255,255,255,.5); border: 1px solid var(--glass-border); cursor: pointer;
  transition: background var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.chk:hover { background: rgba(255,255,255,.75); }
.chk input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--color-accent-deep); flex: none; }
.chk span { font-size: var(--text-sm); line-height: 1.45; }
.chk small { display: block; color: var(--color-ink-3); font-size: var(--text-xs); margin-top: .1rem; }
.chk:has(input:checked) { background: oklch(95% 0.03 215 / .85); border-color: var(--color-accent); }
.dmg-out { display: grid; gap: var(--space-md); align-content: start; }
.dmg-lead { border-top: 1px solid var(--color-line); padding-top: var(--space-lg); }
.dmg-lead .row { display: grid; gap: 0 1rem; }
.dmg-lead .field { margin-bottom: var(--space-sm); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin-top: .6rem; font-size: var(--text-sm); min-height: 1.4em; }
.form-msg.ok { color: oklch(45% 0.1 150); font-weight: 600; }
.form-msg.err { color: oklch(50% 0.16 28); }
@media (min-width: 880px) {
  .dmg { grid-template-columns: 0.9fr 1.1fr; }
  .dmg-lead { grid-column: 1 / -1; }
  .dmg-lead .row { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
}

/* ---- quote tool + customer view page shell ---- */
.page { padding: 6.2rem 0 3rem; }
.page .nav { position: absolute; }
.tool-grid { display: grid; gap: var(--space-lg); }
.panel { padding: clamp(1.1rem, 3.5vw, 1.8rem); }
.panel + .panel { margin-top: var(--space-md); }
.panel > *, .dmg > * { position: relative; }   /* keep content above the glass highlight */
.panel h2 { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.panel h3 { font-size: var(--text-md); margin: var(--space-md) 0 .4rem; }
.step-k { font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--color-accent-deep); display: block; margin-bottom: .3rem; }
.two { display: grid; gap: 0 1rem; }
@media (min-width: 620px) { .two { grid-template-columns: 1fr 1fr; } }
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem; }
.seg label { display: block; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: .75rem .9rem; border-radius: var(--radius-input); border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.5); font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.seg span small { display: block; font-weight: 400; color: var(--color-ink-2); margin-top: .15rem; }
.seg input:checked + span { background: var(--color-accent-deep); border-color: var(--color-accent-deep); color: #fff; }
.seg input:checked + span small { color: rgba(255,255,255,.85); }
.seg input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.script { margin-top: var(--space-sm); padding: .9rem 1rem; border-left: 3px solid var(--color-gold); border-radius: 0 12px 12px 0;
  background: var(--color-gold-soft); font-size: var(--text-sm); display: grid; gap: .5rem; }
.script q { font-style: italic; quotes: "“" "”"; }
.script .warn { color: oklch(45% 0.1 50); font-weight: 500; }

.risk { border: 1px solid var(--glass-border); border-radius: var(--radius-input); background: rgba(255,255,255,.5); margin-bottom: .5rem; }
.risk > label { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 1rem; cursor: pointer; }
.risk > label input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--color-accent-deep); flex: none; }
.risk .rn { font-weight: 600; font-size: var(--text-sm); display: block; }
.risk .rc { font-size: var(--text-xs); color: var(--color-ink-3); }
.risk .rv { margin-left: auto; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-ink-2); white-space: nowrap; padding-left: .5rem; }
.risk.on { border-color: var(--color-accent); background: rgba(255,255,255,.8); }
.risk.on .rv { color: var(--color-ink); font-weight: 600; }
.risk .more { display: none; padding: 0 1rem 1rem 2.95rem; }
.risk.on .more { display: block; }
.risk .qty { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; font-size: var(--text-sm); }
.risk .qty input { width: 6.5rem; font: inherit; padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--color-line); background: #fff; }
.risk .note { font-size: var(--text-xs); color: var(--color-ink-3); margin-top: .5rem; }

.sticky { position: sticky; top: 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--space-md); }
.linkbox { margin-top: .6rem; font-size: var(--text-xs); word-break: break-all; color: var(--color-ink-3); }
.toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translate(-50%, 20px); opacity: 0; z-index: 80;
  background: var(--color-ink); color: #fff; padding: .7rem 1.1rem; border-radius: var(--radius-pill); font-size: var(--text-sm);
  transition: opacity var(--dur-short), transform var(--dur-short) var(--ease-out); pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 980px) { .tool-grid { grid-template-columns: 1.05fr 0.95fr; align-items: start; } }

/* ---- customer view ---- */
.cv-head { display: grid; gap: .4rem; margin-bottom: var(--space-lg); }
.cv-head h1 { font-size: var(--text-3xl); }
.cv-meta { color: var(--color-ink-2); font-size: var(--text-sm); }
.cv-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin-top: var(--space-sm); }
.cv-table th, .cv-table td { text-align: left; padding: .65rem .4rem; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.cv-table th { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-3); font-weight: 600; }
.cv-table td:last-child, .cv-table th:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cv-table .c { display: block; color: var(--color-ink-3); font-size: var(--text-xs); }
.cv-table tfoot td { font-weight: 700; border-bottom: 0; padding-top: .9rem; }
.cv-plan { display: grid; gap: var(--space-md); }
.cv-price { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); line-height: 1.2; }
.rchart.narrow .rc-label { font-size: 13px; }
.rchart.narrow .rc-val { font-size: 12px; }
.cv-price small { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
.cv-note { padding: .8rem 1rem; border-radius: var(--radius-input); background: oklch(95% 0.03 215 / .8); border: 1px solid var(--glass-border); font-size: var(--text-sm); }
@media (min-width: 880px) { .cv-plan { grid-template-columns: 1fr 1fr; } }

/* ---- print: clean black-on-white leave-behind ---- */
@media print {
  @page { margin: 14mm; }
  body { background: #fff !important; font-size: 10.5pt; }
  .aura, .grain, .progress, .nav, .no-print, .toast, footer { display: none !important; }
  .page { padding: 0; }
  .glass, .panel { background: #fff !important; box-shadow: none !important; border: 1px solid #ddd !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .glass::before { display: none !important; }
  .panel, .cv-table tr, .rchart { break-inside: avoid; }
  .cv-head h1 { font-size: 24pt; }
  .print-only { display: block !important; }
  a { color: inherit; text-decoration: none; }
}
.print-only { display: none; }