/* ==========================================================================
   ENNAT ROI Calculator — styles
   Implements the approved design handoff on top of the ENNAT site design
   system (css/theme.css, "Ignition": dark premium, Geist, amber --spark).

   Every rule is scoped under .roi-app so nothing leaks into or clashes with
   the host site's global classes when this drops into ennat-website.

   Tokens the design needs that theme.css does NOT define are declared here,
   locally scoped, so we never have to edit theme.css:
     --radius-sm/md/lg (the design's 9/12/18 scale), --on-spark, --accent-ink,
     and the chart palette (--roi-*, read by app.js).
   ========================================================================== */

.roi-app {
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --on-spark: #150a00;      /* ink on the amber spark gradient */
  --accent-ink: #B07A00;    /* amber ink that stays legible on white */

  /* chart palette (the chart lives in the light panel) — read by app.js */
  --roi-metal: #C8200F;
  --roi-ennat: #B07A00;
  --roi-sav:   #E8A800;
  --roi-grid:  #ECECEF;
  --roi-axis:  #8A8A92;

  color: var(--text);
  font-family: 'Geist', system-ui, sans-serif;
}

/* ---- Integrated pages: clear the site's FIXED nav (theme.css --nav-h) ----
   roi-calculator.html / quote-roi.html use the site chrome (js/chrome.js) whose
   .nav is position:fixed; add top room so our content isn't hidden behind it.
   (The standalone dev shell uses an in-flow .roi-nav and ignores this class.) */
/* Specificity note: `.roi-main` (below) sets `padding` as a shorthand, which also
   resets padding-top; matching its 2-class weight with `.roi-main.roi-main-page`
   ensures this clearance wins regardless of source order (fixes the eyebrow printing
   over the fixed nav/logo). */
.roi-app .roi-main.roi-main-page { padding-top: calc(var(--nav-h, 74px) + 30px); }

/* ---- STAGING nav (replaced by the site's js/chrome.js at integration) ---- */
.roi-app .roi-nav {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px;
  height: 66px; padding: 0 30px; background: rgba(10,10,12,.72);
  backdrop-filter: blur(16px); border-bottom: 1px solid var(--line);
}
.roi-app .roi-logo { display: flex; flex-direction: column; justify-content: center; line-height: 1; gap: 4px; flex-shrink: 0; }
.roi-app .roi-logo .wm { font-weight: 700; font-size: 18px; letter-spacing: .01em; color: var(--text); }
.roi-app .roi-logo .tag { font-size: 8px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.roi-app .roi-nav .links { display: flex; gap: 20px; margin-left: 6px; }
.roi-app .roi-nav .links a { font-size: 13.5px; color: var(--text-2); font-weight: 500; transition: color .18s; }
.roi-app .roi-nav .links a:hover, .roi-app .roi-nav .links a.act { color: var(--text); }
.roi-app .roi-nav .sp { flex: 1; }
.roi-app .roi-lang { display: inline-flex; flex-shrink: 0; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.roi-app .roi-lang button { background: none; border: 0; color: var(--text-3); font-weight: 600; font-size: 12px; padding: 6px 12px; cursor: pointer; transition: color .18s, background .18s; }
.roi-app .roi-lang button.on { background: var(--spark); color: var(--on-spark); }
.roi-app .roi-cta {
  display: inline-flex; flex-shrink: 0; align-items: center; gap: 7px;
  background: var(--spark); color: var(--on-spark); font-weight: 600; font-size: 13px;
  padding: 9px 16px; border-radius: 999px; box-shadow: 0 8px 22px -10px rgba(255,193,7,.6);
  transition: transform .2s var(--ease), box-shadow .28s var(--ease);
}
.roi-app .roi-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(255,193,7,.7); }

/* ---- Page head ---- */
.roi-app .roi-main { max-width: 1120px; margin: 0 auto; padding: 40px 30px 56px; }
.roi-app .roi-eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3); display: inline-flex; align-items: center; gap: 10px;
}
.roi-app .roi-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--spark); }
.roi-app .roi-h1 { font-weight: 700; font-size: 44px; letter-spacing: -.02em; line-height: 1.04; color: var(--text); margin: 16px 0 10px; }
.roi-app .roi-h1 .g { background: var(--spark); -webkit-background-clip: text; background-clip: text; color: transparent; }
.roi-app .roi-sub { color: var(--text-2); font-size: 17px; max-width: 62ch; margin: 0 0 30px; }

/* ==========================================================================
   The light panel — the defining move of the design. Everything inside flips
   to light ink by re-mapping the theme tokens locally.
   ========================================================================== */
.roi-app .roi-panel.ennat-light {
  --text: #141319;
  --text-2: #55555C;
  --text-3: #8A8A92;
  --surface-2: #F3F3F5;
  --line: #E7E7EA;
  --line-strong: #DCDCE1;

  background: #F7F7F9; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 22px 24px; box-shadow: 0 44px 100px -46px rgba(0,0,0,.85);
  color: var(--text);
}

/* ---- Family strip ---- */
.roi-app .roi-fams { display: flex; gap: 11px; overflow-x: auto; padding: 2px 2px 18px; scrollbar-width: thin; }
.roi-app .roi-fams::-webkit-scrollbar { height: 6px; }
.roi-app .roi-fams::-webkit-scrollbar-thumb { background: #D9D9DE; border-radius: 3px; }
/* Uniform cards: every tile has the SAME white chrome and EVERY product render is in
   FULL COLOUR, selected or not (Martin — the strip should read like a catalogue, not a
   greyed-out list). The only selection signal is the amber ring + the darker name. */
.roi-app .roi-fam {
  flex: 0 0 auto; width: 124px; text-align: left; cursor: pointer; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px;
  transition: transform .22s var(--ease), border-color .22s, box-shadow .22s;
  font-family: inherit;
}
.roi-app .roi-fam:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(0,0,0,.28); }
.roi-app .roi-fam.on {
  border-color: rgba(176,122,0,.55);
  box-shadow: inset 0 0 0 1.5px rgba(255,193,7,.6), 0 14px 30px -16px rgba(255,193,7,.42);
}
.roi-app .roi-fam .th {
  position: relative; aspect-ratio: 1/1; border-radius: 9px; background: #F4F4F6;
  overflow: hidden; margin-bottom: 8px;
}
.roi-app .roi-fam .th img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px;
}
.roi-app .roi-fam .nm { font-weight: 600; font-size: 12.5px; color: var(--text-2); line-height: 1.22; }
.roi-app .roi-fam.on .nm { color: var(--text); }
.roi-app .roi-fam .uom { color: var(--text-3); font-size: 10.5px; margin-top: 3px; }

/* ---- Two-column grid + cards ---- */
/* minmax(0,…) lets the tracks shrink below their content's min-width, so a wide
   KPI number never blows the right column (and the chart) out past the panel. */
.roi-app .roi-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 18px; }
.roi-app .roi-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; }
.roi-app .roi-chead { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; flex-wrap: wrap; }
.roi-app .roi-chead h2 { font-weight: 600; font-size: 18px; color: var(--text); margin: 0; }
.roi-app .roi-badge {
  font-size: 10.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--accent-ink); border: 1px solid var(--line);
}
.roi-app .roi-hint { color: var(--text-3); font-size: 13px; margin: 2px 0 16px; }

/* ---- Inputs ---- */
.roi-app .roi-qty { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; }
.roi-app .roi-qty label { font-weight: 600; font-size: 14px; color: var(--text); }
.roi-app .roi-qty .roi-hint { margin: 0; }
.roi-app .roi-in {
  display: inline-block; min-width: 92px; text-align: right; font-family: inherit; font-size: 14px;
  font-weight: 600; color: var(--text); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 7px 11px; transition: border-color .18s, box-shadow .18s;
}
.roi-app .roi-in:focus { outline: none; border-color: rgba(176,122,0,.55); box-shadow: 0 0 0 3px rgba(255,201,40,.18); }
.roi-app .roi-qty .roi-in { min-width: 96px; font-size: 16px; }

/* table-layout:fixed + explicit value-column widths keep BOTH the Metal and the
   ENNAT columns inside the card (the inputs used to keep their ~180px intrinsic width
   and pushed the ENNAT column off the right edge). The label column takes the rest. */
.roi-app .roi-io { width: 100%; border-collapse: collapse; table-layout: fixed; }
.roi-app .roi-io th, .roi-app .roi-io td { padding: 8px 6px; text-align: right; font-size: 14px; vertical-align: middle; }
.roi-app .roi-io th:nth-child(2), .roi-app .roi-io td:nth-child(2),
.roi-app .roi-io th:nth-child(3), .roi-app .roi-io td:nth-child(3) { width: 120px; }
.roi-app .roi-io .roi-in { min-width: 0; width: 100%; }   /* fill the (narrow) cell, right-aligned */
/* Value cells (ENNAT derived + totals) right-align to the SAME line as the METAL input's
   text: the input's padding insets its text ~18px from the cell edge, so give the plain
   cells a matching right padding. The $0 warranty ⓘ is absolute so it never shifts the $0. */
.roi-app .roi-io td.roi-vc { position: relative; padding-right: 18px; white-space: nowrap; }
.roi-app .roi-io td.roi-vc.roi-free { color: #0a7d3a; font-weight: 700; }
.roi-app .roi-io td.roi-vc .roi-info { position: relative; margin: 0 9px 0 0; vertical-align: middle; }
/* incident-frequency slider — a light panel ABOVE the METAL/ENNAT table (just under the edit hint) */
.roi-app .roi-slider-box { margin: 6px 0 20px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(176,122,0,.05); }
.roi-app .roi-slider label { display: block; color: var(--text-2); font-size: 14px; margin-bottom: 12px; }
.roi-app .roi-slider-ctl { display: flex; align-items: center; gap: 14px; }
.roi-app .roi-slider input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--accent-ink); height: 5px; cursor: pointer; }
.roi-app .roi-slider-val { flex: 0 0 auto; min-width: 66px; text-align: right; font-weight: 700; font-size: 16px; color: var(--text); }
.roi-app .roi-slider-u { font-weight: 500; font-size: 12.5px; color: var(--text-3); }
.roi-app .roi-io th:first-child, .roi-app .roi-io td:first-child { text-align: left; color: var(--text-2); font-weight: 500; }
.roi-app .roi-io thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3);
  font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: 11px;
}
/* METAL / ENNAT column headers: centred over their column, white and bold (Martin's request). */
.roi-app .roi-io thead th:nth-child(2), .roi-app .roi-io thead th:nth-child(3) {
  text-align: center; color: var(--text); font-weight: 800; font-size: 13px; letter-spacing: .1em;
}
.roi-app .roi-io .grp td { padding-top: 17px; font-weight: 600; color: var(--text); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; }
.roi-app .roi-io .tot td { border-top: 1px solid var(--line); font-weight: 700; padding-top: 12px; color: var(--text); }
.roi-app .roi-uomnote { font-size: 11px; color: var(--text-3); font-weight: 500; }
.roi-app .roi-mtxt { color: var(--roi-metal); }
.roi-app .roi-etxt { color: var(--accent-ink); }
.roi-app .roi-derived { font-weight: 600; color: var(--accent-ink); }

/* ENNAT protection = $0 (durability warranty): the little ⓘ explains why. */
.roi-app .roi-free { color: #0a7d3a; font-weight: 700; }
.roi-app .roi-info {
  display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
  margin-left: 6px; border-radius: 50%; background: var(--accent-ink); color: #fff;
  font-size: 10px; font-weight: 700; font-style: normal; cursor: help; position: relative;
  vertical-align: middle; user-select: none; font-family: Georgia, 'Times New Roman', serif;
}
.roi-app .roi-info::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 9px); right: 0;
  width: max-content; max-width: 230px; white-space: pre-line; background: #141319; color: #fff; font-size: 12px;
  font-weight: 500; font-family: 'Geist', system-ui, sans-serif; line-height: 1.5; text-align: left;
  padding: 8px 11px; border-radius: 8px; box-shadow: 0 12px 34px -12px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .16s, transform .16s, visibility .16s; z-index: 30; pointer-events: none;
}
.roi-app .roi-info::before {
  content: ""; position: absolute; bottom: calc(100% + 4px); right: 5px; border: 5px solid transparent;
  border-top-color: #141319; opacity: 0; visibility: hidden; transition: opacity .16s, visibility .16s; z-index: 31;
}
.roi-app .roi-info:hover::after, .roi-app .roi-info:focus-visible::after,
.roi-app .roi-info:hover::before, .roi-app .roi-info:focus-visible::before {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* "Thin premium" plausibility flag on a quoted line (metal cost too close to ENNAT's real
   price) — same ⓘ tooltip plumbing as .roi-info, amber instead of ink so it reads as a
   heads-up rather than routine info. */
.roi-app .roi-warn { background: #b9740a; font-family: 'Geist', system-ui, sans-serif; font-size: 11px; }

.roi-app .roi-singles { margin-top: 8px; }
.roi-app .roi-single { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.roi-app .roi-single label { color: var(--text-2); font-size: 14px; }
.roi-app .roi-single .v { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.roi-app .roi-single .v .s { color: var(--text-3); font-weight: 400; }
.roi-app .roi-yr { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 0; }
.roi-app .roi-yr .lab { color: var(--text-2); font-size: 14px; }
.roi-app .roi-yr .v { font-weight: 700; font-size: 15px; }

.roi-app .roi-ghost {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; background: var(--surface-2);
  border: 1px solid var(--line-strong); color: var(--text); font-weight: 600; font-size: 13px;
  padding: 10px 18px; border-radius: 999px; cursor: pointer; font-family: inherit;
  transition: border-color .18s, background .18s;
}
.roi-app .roi-ghost:hover { background: #ECECEF; border-color: #C9C9D0; }

/* ---- KPIs ---- */
.roi-app .roi-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
/* KPIs in the "OUR CLIENTS" stat-card style but on a LIGHT tile: white card, a SOLID
   brand-warm colour PER number (ROI amber, savings burnt gold, payback terracotta),
   uppercase muted label, FLAT (no shadow / accent bar / hero). The number auto-fits to the
   card width in JS so it never clips. */
.roi-app .roi-kpi {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 20px; min-width: 0; overflow: hidden;
}
.roi-app .roi-kpi .v {
  font-weight: 800; font-size: clamp(26px, 3vw, 42px); line-height: 1.0; letter-spacing: -.03em; white-space: nowrap;
  color: #E29400;
}
.roi-app #k-roi { color: #E29400; }  /* 5-Year ROI — amber */
.roi-app #k-sav { color: #B45309; }  /* 5-Year Savings — burnt gold */
.roi-app #k-pay { color: #9A3412; }  /* Payback — terracotta */
.roi-app .roi-kpi .v .u { font-size: .40em; font-weight: 700; letter-spacing: 0; color: var(--text-3); }
.roi-app .roi-kpi .l { color: var(--text-3); font-size: 12px; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; margin-top: 12px; }

/* ---- Chart ---- */
.roi-app .roi-chart-title { font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: var(--text); margin: 0 0 14px; }
.roi-app .roi-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 4px 0 12px; font-size: 12.5px; color: var(--text-2); }
.roi-app .roi-legend span { display: inline-flex; align-items: center; gap: 7px; }
.roi-app .roi-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.roi-app .roi-dot.metal { background: var(--roi-metal); }
.roi-app .roi-dot.ennat { background: var(--roi-ennat); }
.roi-app .roi-dot.sav { background: rgba(255,193,7,.28); border: 1px solid var(--roi-sav); }
.roi-app .roi-svg { width: 100%; height: auto; display: block; }

.roi-app .roi-pdf {
  display: flex; width: fit-content; margin-left: auto; /* right-align below the chart (Martin) */
  align-items: center; gap: 9px; margin-top: 18px; background: var(--spark);
  color: var(--on-spark); font-weight: 600; font-size: 14.5px; padding: 13px 24px; border-radius: 999px;
  border: 0; cursor: pointer; font-family: inherit; box-shadow: 0 10px 30px -10px rgba(255,193,7,.55);
  transition: transform .2s var(--ease), box-shadow .28s var(--ease);
}
.roi-app .roi-pdf:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(255,193,7,.65); }

/* ---- Inline report capture (replaces the old multi-field lead form) ----
   Revealed by the report button. Download is one click; entering an email delivers
   the PDF by mail — the only field we ask for, and how we capture the lead. */
.roi-app .roi-capture { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; }
.roi-app .roi-capture h3 { font-weight: 700; font-size: 15px; color: var(--text); margin: 0 0 4px; }
.roi-app .roi-cap-sub { color: var(--text-3); font-size: 13px; margin: 0 0 14px; }
.roi-app .roi-cap-row { display: flex; gap: 10px; flex-wrap: wrap; }
.roi-app .roi-cap-row input {
  flex: 1 1 220px; min-width: 0; border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14.5px; font-family: inherit;
  transition: border-color .18s, box-shadow .18s;
}
.roi-app .roi-cap-row input::placeholder { color: var(--text-3); }
.roi-app .roi-cap-row input:focus { outline: none; border-color: rgba(176,122,0,.55); box-shadow: 0 0 0 3px rgba(255,201,40,.18); }
.roi-app .roi-cap-send {
  flex: 0 0 auto; border: 0; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 14px;
  padding: 12px 20px; border-radius: var(--radius-sm); background: var(--spark); color: var(--on-spark);
  box-shadow: 0 10px 26px -12px rgba(255,193,7,.6); transition: transform .2s var(--ease), box-shadow .28s var(--ease), opacity .2s;
}
.roi-app .roi-cap-send:hover { transform: translateY(-1px); }
.roi-app .roi-cap-send[disabled] { opacity: .55; cursor: default; transform: none; }
.roi-app .roi-cap-or { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 12px; margin: 14px 0; }
.roi-app .roi-cap-or::before, .roi-app .roi-cap-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.roi-app .roi-cap-dl { margin-top: 0; }
.roi-app .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.roi-app .ok { color: var(--accent-ink); font-weight: 600; font-size: 13.5px; margin-top: 12px; }
.roi-app .ok.err { color: var(--roi-metal); }

/* ---- Disclaimer + staging footer ---- */
.roi-app .roi-disc { color: var(--text-3); font-size: 12px; margin-top: 22px; line-height: 1.6; white-space: pre-line; }

/* Reset defaults + "How is this calculated?" sit together on one row under the inputs. */
.roi-app .roi-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
.roi-app .roi-actions .roi-ghost { margin-top: 0; }
.roi-app .roi-actions .roi-method { margin-top: 0; margin-left: auto; }
/* "How is this calculated?" link + methodology modal */
.roi-app .roi-method {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; background: none; border: 0;
  color: var(--accent-ink); font-family: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 0;
}
.roi-app .roi-method:hover { color: #8a6a00; }
.roi-app .roi-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.roi-app .roi-modal[hidden] { display: none; }
.roi-app .roi-modal-bg { position: absolute; inset: 0; background: rgba(10,10,12,.62); backdrop-filter: blur(3px); }
.roi-app .roi-modal-box {
  position: relative; z-index: 1; background: #fff; color: #141319; border-radius: 16px;
  max-width: 560px; width: 100%; max-height: 86vh; overflow-y: auto; padding: 28px 30px 30px;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.7);
}
.roi-app .roi-modal-x {
  position: absolute; top: 12px; right: 16px; background: none; border: 0; font-size: 26px; line-height: 1;
  color: #8A8A92; cursor: pointer; padding: 4px;
}
.roi-app .roi-modal-x:hover { color: #141319; }
.roi-app .roi-modal-box h3 { font-weight: 700; font-size: 20px; margin: 0 0 14px; color: #141319; padding-right: 30px; }
.roi-app .roi-method-body { font-size: 14px; line-height: 1.6; color: #3a3a42; }
.roi-app .roi-method-body p { margin: 0 0 12px; }
.roi-app .roi-method-body b { color: #141319; }
.roi-app .roi-method-body ul { margin: 0 0 12px; padding-left: 22px; list-style: disc; }
.roi-app .roi-method-body li { margin: 4px 0; display: list-item; }
.roi-app .roi-foot {
  background: var(--bg-2); border-top: 1px solid var(--line); padding: 22px 30px;
  display: flex; align-items: center; gap: 18px; justify-content: space-between; flex-wrap: wrap;
}
.roi-app .roi-foot .wm { font-weight: 700; color: var(--text); font-size: 15px; }
.roi-app .roi-foot .l { display: flex; align-items: center; gap: 14px; color: var(--text-3); font-size: 12.5px; }
.roi-app .roi-foot .r { display: flex; gap: 16px; color: var(--text-3); font-size: 12.5px; }
.roi-app .roi-foot .r a:hover { color: var(--text-2); }

/* ==========================================================================
   Project ROI (per quote) — quote-roi.html. Reuses the light panel, cards,
   KPIs, I/O table and chart above; only the pieces below are extra.
   ========================================================================== */

/* loading / error state */
.roi-app .roi-state { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: 15px; padding: 60px 0; }
.roi-app .roi-state[hidden] { display: none; }  /* the [hidden] attr must win over display:flex */
.roi-app .roi-state.err { color: var(--text-2); max-width: 62ch; line-height: 1.6; }
.roi-app .roi-state.err .roi-spin { display: none; }
.roi-app .roi-spin {
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--line-strong); border-top-color: var(--amber);
  animation: roi-spin .8s linear infinite;
}
@keyframes roi-spin { to { transform: rotate(360deg); } }

/* back link (dark page, above the panel) */
.roi-app .roi-back {
  background: none; border: 0; color: var(--text-3); font-family: inherit; font-weight: 600;
  font-size: 13.5px; cursor: pointer; padding: 0; margin-bottom: 14px; transition: color .18s;
}
.roi-app .roi-back:hover { color: var(--text); }

/* 4-up KPI row (project level) */
.roi-app .roi-kpis.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Project header: client name + quote number, big and prominent beside the title.
   (These sit OUTSIDE the panel, so they use the site's theme tokens — light on the dark page.) */
.roi-app .roi-projhead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 6px 0 26px; }
.roi-app .roi-client { font-weight: 700; font-size: 30px; letter-spacing: -.02em; color: var(--text); line-height: 1.1; }
.roi-app .roi-quoteno {
  font-weight: 600; font-size: 13.5px; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--line); padding: 5px 13px; border-radius: 999px;
}

/* Title row: heading block on the left, "Get my ROI report" CTA top-right — frees vertical room so
   the chart below can grow taller. (Outside the panel → uses the site's dark-page tokens.) */
.roi-app .roi-headrow { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.roi-app .roi-headrow .roi-headmain { min-width: 0; }
.roi-app .roi-report-btn {
  flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  background: var(--spark); color: var(--on-spark); font-weight: 700; font-size: 14.5px; padding: 13px 24px;
  border-radius: 999px; border: 0; cursor: pointer; font-family: inherit;
  box-shadow: 0 10px 30px -10px rgba(255,193,7,.55); transition: transform .2s var(--ease), box-shadow .28s var(--ease);
}
.roi-app .roi-report-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(255,193,7,.65); }

/* L2: report button + the preset control stacked in the top-right (the preset moved OUT of the panel
   so the chart below can grow taller). This sits on the DARK page, so the seg needs its own accent. */
.roi-app .roi-headside { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; min-width: 0; }
.roi-app .roi-presets-side { flex-direction: column; align-items: flex-end; gap: 9px; margin: 0; }
.roi-app .roi-presets-side .roi-presets-q { align-items: flex-end; text-align: right; }
.roi-app .roi-presets-side .roi-privacy { margin-left: 0; flex: 0 1 auto; max-width: 340px; }

/* Project L1: chart (small, left) + KPIs stacked vertically (right), families below.
   align-items:stretch + the chart card as a flex column lets the chart grow tall enough to
   line up with the bottom of the KPI stack (Martin). */
.roi-app .roi-proj-top { display: grid; grid-template-columns: 2.3fr 1fr; gap: 20px; align-items: stretch; margin-bottom: 20px; }
.roi-app .roi-kpis.vertical { grid-template-columns: 1fr; gap: 14px; margin-bottom: 0; }
.roi-app .roi-chart-card { min-width: 0; display: flex; flex-direction: column; }
.roi-app .roi-chart-card .roi-svg { flex: 1 1 auto; min-height: 260px; height: auto; }
@media (max-width: 820px) {
  .roi-app .roi-proj-top { grid-template-columns: 1fr; align-items: start; }
  .roi-app .roi-kpis.vertical { grid-template-columns: repeat(2, 1fr); }
}

/* Project KPIs more compact (Martin: narrower blocks). */
.roi-app #view-project .roi-kpi, .roi-app #view-family .roi-kpi { padding: 16px 16px; }
.roi-app #view-project .roi-kpi .v, .roi-app #view-family .roi-kpi .v { font-size: clamp(22px, 2.3vw, 32px); }

/* cards below the main block */
.roi-app .roi-fams-card, .roi-app .roi-lines-card { margin-top: 20px; }
.roi-app .roi-fams-card h3, .roi-app .roi-lines-card h3 { font-weight: 600; font-size: 18px; color: var(--text); margin: 0 0 4px; }
.roi-app .roi-tablewrap { overflow-x: auto; }

/* ROI-by-family table (clickable rows -> family level) */
.roi-app .roi-ftable, .roi-app .roi-ltable { width: 100%; border-collapse: collapse; font-size: 14px; }
.roi-app .roi-ftable th, .roi-app .roi-ltable th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3);
  font-weight: 600; text-align: right; padding: 0 8px 11px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.roi-app .roi-ftable th:first-child, .roi-app .roi-ltable th:first-child,
.roi-app .roi-ftable th:nth-child(2), .roi-app .roi-ltable th:nth-child(2) { text-align: left; }
.roi-app .roi-ftable td, .roi-app .roi-ltable td { padding: 11px 8px; text-align: right; color: var(--text-2); white-space: nowrap; }
.roi-app .roi-ftable tbody tr { border-bottom: 1px solid var(--line); }
.roi-app .roi-ftable tbody tr[data-idx] { cursor: pointer; transition: background .16s; }
.roi-app .roi-ftable tbody tr[data-idx]:hover, .roi-app .roi-ftable tbody tr[data-idx]:focus-visible { background: #FAFAFB; outline: none; }
.roi-app .roi-ftable tbody td { padding: 20px 8px; }  /* double-height family rows (Martin) */
.roi-app .roi-ftable td.th { width: 76px; min-width: 76px; padding: 10px 10px 10px 0; }
/* max-width:none defeats the global `img{max-width:100%}` — otherwise the auto-layout column
   (squeezed by the slider column) caps the photo to ~0px. */
.roi-app .roi-ftable td.th img { width: 64px; min-width: 64px; max-width: none; height: 64px; object-fit: contain; border-radius: 9px; background: #F3F3F5; }
.roi-app .roi-ftable td.nm { text-align: left; font-weight: 600; color: var(--text); white-space: normal; }
/* per-family month slider in the ROI-by-family table (Martin) — centred in its column */
.roi-app .roi-ftable td.roi-inc-cell { text-align: center; }
.roi-app .roi-inc-mini { display: flex; align-items: center; justify-content: center; gap: 9px; }
.roi-app .roi-inc-mini input[type="range"] { width: 84px; accent-color: var(--accent-ink); height: 4px; cursor: pointer; }
.roi-app .roi-inc-val { font-size: 12px; color: var(--text-2); white-space: nowrap; font-weight: 600; }
.roi-app .roi-ftable td.go { width: 22px; color: var(--text-3); font-size: 17px; }
.roi-app .roi-ftable tbody tr[data-idx]:hover td.go { color: var(--accent-ink); }
.roi-app .roi-ftable .strong { font-weight: 700; }
.roi-app .roi-ftable tr.tot td, .roi-app .roi-ltable tr.tot td {
  border-top: 1px solid var(--line-strong); border-bottom: 0; font-weight: 700; color: var(--text); padding-top: 13px;
}

/* quoted-lines table (where the numbers come from) */
.roi-app .roi-ltable td:nth-child(2) { text-align: left; white-space: normal; color: var(--text); }
.roi-app .roi-ltable .mono { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.roi-app .roi-ltable tbody tr { border-bottom: 1px solid var(--line); }
/* Value column (5th: Code/Desc/Qty/Length/Value/ROI/Payback/Savings) — slightly lighter fill
   so it reads as its own column at a glance (Martin). var(--surface-2) already resolves to
   the right shade for whichever theme (light/dark) is active, no separate override needed. */
.roi-app .roi-ltable th:nth-child(5), .roi-app .roi-ltable td:nth-child(5) { background: var(--surface-2); }

@media (max-width: 900px) { .roi-app .roi-kpis.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .roi-app .roi-kpis.four { grid-template-columns: 1fr; } }

/* ---- Responsive ---- */
@media (max-width: 900px) { .roi-app .roi-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .roi-app .roi-kpis { grid-template-columns: 1fr; }
  .roi-app .roi-nav .links { display: none; }
  .roi-app .roi-main { padding: 28px 18px 44px; }
  .roi-app .roi-h1 { font-size: 34px; }
  .roi-app .roi-panel.ennat-light { padding: 16px 14px 18px; }
  .roi-app .roi-card { padding: 18px; }
  /* .roi-io: las columnas METAL/ENNAT fijas en 120px (puestas para que los inputs
     no empujen la columna ENNAT fuera de la tarjeta, ver comentario de la regla
     base) dejaban solo ~31px para la etiqueta a 375px de ancho - hasta 97px menos
     de lo que necesita una etiqueta larga como "Infrastructure repair / replace".
     Se angostan las columnas y se reduce tipografia/padding solo en este breakpoint. */
  .roi-app .roi-io th, .roi-app .roi-io td { padding: 7px 4px; font-size: 12.5px; }
  .roi-app .roi-io th:nth-child(2), .roi-app .roi-io td:nth-child(2),
  .roi-app .roi-io th:nth-child(3), .roi-app .roi-io td:nth-child(3) { width: 78px; }
  .roi-app .roi-io td.roi-vc { padding-right: 8px; }
  .roi-app .roi-io thead th:nth-child(2), .roi-app .roi-io thead th:nth-child(3) { font-size: 11px; letter-spacing: .04em; }
  .roi-app .roi-in { padding: 6px 8px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .roi-app *, .roi-app *::before, .roi-app *::after { transition: none !important; animation: none !important; }
}

/* ---- Project ROI: "how is your operation?" presets, inline privacy note, differentiated totals ---- */
/* Privacy note now sits INSIDE the preset bar, pushed to the far right (there's room there). Colours
   are explicit (light-on-dark) — the panel is dark in this app, so they read on it either way. */
.roi-app .roi-privacy {
  display: flex; align-items: center; gap: 8px; flex: 0 1 380px; margin: 0; padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.11); border-radius: 10px;
  background: rgba(255,255,255,.045); color: rgba(233,233,240,.66); font-size: 12px; line-height: 1.35;
}
.roi-app .roi-presets .roi-privacy { margin-left: auto; } /* push it to the right of the segmented control */
.roi-app .roi-privacy-ic { font-size: 13px; flex: 0 0 auto; }

/* Preset control lives INSIDE the light panel → uses the panel's remapped tokens. */
.roi-app .roi-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin: 0 0 20px; }
.roi-app .roi-presets-q { display: flex; flex-direction: column; gap: 2px; }
.roi-app .roi-presets-lbl { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.roi-app .roi-presets-sub { font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
/* The preset control now lives INSIDE the inputs/assumptions card, right above the slider. The card
   is narrower than the panel, so compact the chips enough to keep the question + chips on ONE row
   even in Spanish (longer labels + "meses"). */
.roi-app .roi-presets-incard { margin: 6px 0 16px; gap: 10px 14px; }
.roi-app .roi-presets-incard .roi-seg { margin-left: auto; } /* question left, scenario chips pushed right (Martin) */
.roi-app .roi-presets-incard .roi-presets-lbl { font-size: 14px; }
.roi-app .roi-presets-incard .roi-seg button { padding: 6px 12px; font-size: 12.5px; }
.roi-app .roi-presets-incard .roi-seg button em { font-size: 10px; }
/* L2: the privacy note is now a slim standalone line at the panel top (no longer inside a preset row). */
.roi-app .roi-panel > .roi-privacy { margin: 0 0 18px; max-width: 720px; }
.roi-app .roi-seg { display: inline-flex; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.roi-app .roi-seg button {
  display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.15;
  padding: 7px 17px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 13.5px; color: var(--text-2);
  transition: background .15s, color .15s, box-shadow .15s;
}
.roi-app .roi-seg button em { font-style: normal; font-weight: 500; font-size: 11px; color: var(--text-3); }
.roi-app .roi-seg button:hover { color: var(--text); }
.roi-app .roi-seg button.on { background: var(--accent-ink); color: #fff; box-shadow: 0 2px 9px rgba(176,122,0,.30); }
.roi-app .roi-seg button.on em { color: rgba(255,255,255,.86); }

/* Two summary rows must NOT look identical: per-incident = light dashed subtotal; yearly = bold accent grand total. */
.roi-app .roi-io tr.roi-subtot td { border-top: 1px dashed var(--line); font-weight: 600; color: var(--text-2); padding-top: 10px; }
.roi-app .roi-io tr.roi-grandtot td { border-top: 2px solid var(--accent-ink); font-weight: 800; color: var(--text); padding-top: 13px; }
.roi-app .roi-io tr.roi-grandtot td.roi-etxt { color: var(--accent-ink); }

@media (max-width: 640px) {
  .roi-app .roi-seg { width: 100%; }
  .roi-app .roi-seg button { flex: 1 1 0; padding: 7px 8px; }
}