/* ============================================
   gs-calculator — Section #8: ROI / TCO calculator
   Replicated from Marat's HubSpot source.

   Adaptations vs. the original:
   1. Calculator-scoped tokens moved from :root → .gs-calculator
      so they don't pollute the global namespace.
   2. --gs-vivid-blue: #009fff → #007CFF — light-bg section per
      our two-accent token rule (#009fff is reserved for dark bg).
      Same swap for any #0087ff occurrences (those rounded the
      same hue inconsistently in the source).
   3. Section wrapper styles (bg, padding, header) added on top.
   4. Mobile section padding aligned with the unified 3rem 1.5rem
      we use across all sections under 767px.
   ============================================ */

.gs-calculator {
  /* ─── Calculator-scoped tokens (replacing source :root vars) ── */
  --gs-blue: #002645;
  --gs-vivid-blue: #007CFF;        /* was #009fff — light-bg variant */
  --gs-orange: #e86d00;
  --gs-black: #001122;
  --gs-white: #fafafa;
  --gs-electric-blue: #1a365d;
  --gs-shadow-blue: #4a5568;
  --white: #ffffff;
  --text-primary: var(--gs-blue);
  --text-secondary: var(--gs-electric-blue);
  --text-muted: var(--gs-shadow-blue);
  --border-color: #e2e8f0;

  /* ─── Section frame ─── */
  background: var(--color-bg-muted);  /* Giant Swarm White, alternates with #7 dark */
  padding: 5rem 1.5rem;
}

.gs-calculator__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

.gs-calculator__header {
  text-align: center;
  max-width: var(--content-header);
  margin: 0 auto 3rem;
}

.gs-calculator__title {
  font-size: var(--text-h2);
  margin: 0 0 1rem;
}

.gs-calculator__description {
  color: var(--color-fg-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin: 0;
  text-wrap: balance;
}

/* Wraps the calculator widget (config card + results table). Uses
   --content-dense (1200) so the results table has the horizontal
   room it needs without forcing awkward wraps. Wider than the
   standard --content-frame used by most other sections. */
.gs-calculator__layout {
  max-width: var(--content-dense);
  margin: 0 auto;
}

/* ============================================
   ↓↓↓ Below this line: replicated verbatim from
   Marat's HubSpot source. Only color hex swaps:
     #009fff → #007CFF (vivid blue, light-bg variant)
     #0087ff → #007CFF (unify on the canonical accent)
   ============================================ */

/* ------------ SLIDER (Core count) – CUSTOM WITH FILL ------------ */

#cores {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px!important;
  border-radius: 999px;
  /* background is the "track" + progress fill */
  background: linear-gradient(
    to right,
    var(--gs-vivid-blue) 0%,
    var(--gs-vivid-blue) var(--core-fill, 33%),
    #e5e7eb var(--core-fill, 33%),
    #e5e7eb 100%
  );
  outline: none;
  cursor: pointer;
  border: none;
  padding: 3px 0;
}

/* No hover effect on track – we don't style #cores:hover at all */

/* WebKit track uses transparent so we see the input's background */
#cores::-webkit-slider-runnable-track {
  height: 2px!important;
  border-radius: 999px;
  background: transparent;
  border: none;
}

/* WebKit thumb (the bubble) */
#cores::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;          /* ✅ circle */
  border-radius: 50%;    /* ✅ circle */
  background: #ffffff;
  border: 2px solid var(--gs-vivid-blue);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35);
  margin-top: -6px;      /* ✅ re-center for 2px track */
  transition: box-shadow 0.15s ease;
}

/* Hover: only a bright ring around the bubble */
#cores::-webkit-slider-thumb:hover {
  box-shadow:
    0 0 0 4px rgba(0, 124, 255, 0.28),
    0 2px 6px rgba(15, 23, 42, 0.35);
}

/* Firefox track */
#cores::-moz-range-track {
  height: 2px!important;
  border-radius: 999px;
  background: transparent;
  border: none;
}

/* Firefox thumb */
#cores::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid var(--gs-vivid-blue);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35);
  transition: box-shadow 0.15s ease;
}

#cores::-moz-range-thumb:hover {
  box-shadow:
    0 0 0 4px rgba(0, 124, 255, 0.28),
    0 2px 6px rgba(15, 23, 42, 0.35);
}


/* ------------ UNIFIED CARD CHROME ------------
   Both calculator boxes (config + results) match the rest of Loom:
   2px solid #e3e6ec border, 24px radius, no shadow. The original
   used a 12px radius + box-shadow which read as "different system"
   next to the delivery-model / outcome-card sections. */
.roi-calculator-box,
.roi-results-card {
  border: 1.5px solid #e3e6ec !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* Drop the top border on the table's header row — the card already
   has its own 2px outer border at the top, so the row's 1px border
   was reading as a double-line at the card's top edge. */
.roi-results-table thead tr {
  border-top: 0;
}

/* ------------ CAPABILITIES GRID ------------ */

.roi-cap-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); /* 12-column grid */
  gap: 10px;
}

/* Column spans */
.roi-cap-top {
  grid-column: span 3;           /* 4 items x 3 = 12 */
}

.roi-cap-bottom,
.roi-cap-full {
  grid-column: span 4;           /* 3 items x 4 = 12 */
}

/* ------------ CAPABILITY PILLS — round pill + visible checkbox ------------
   Round pill shape (was: rectangle with 6px corners) + brought-back
   round checkbox indicator on the left. Checked state carries
   visually via the filled blue checkbox + blue border + blue text.
   Removed the × icon and the soft-blue bg fill (Marat: didn't like
   the active appearance). */

/* Borderless pill design — both inactive and active states are
   FILLED (different bg colors), distinguished by color rather than
   border. The round checkbox on the left carries the toggle
   affordance, so the pills themselves don't need a border to
   communicate "interactive". The 2px border was inverting the
   hierarchy (inactive looking more prominent than active). */
.roi-cap-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.95rem;     /* slight bump to compensate for removed 2px border */
  background: #eeeeee73;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
  /* Bumped from 0.85rem so the cap-pill labels match the toggle
     label scale (0.9rem) — same control hierarchy reads as one
     consistent type system. */
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gs-blue);
}

/* Hover preview matches the active bg so hover feels like a
   "what selecting will look like" preview, not a separate state. */
.roi-cap-pill:hover {
  background: #e8f4ff;
}

/* Round checkbox indicator on the left of the pill. */
.roi-cap-pill input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid #ccd6e0;
  background: #ffffff;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

/* Checked: fill blue + draw white check inside */
.roi-cap-pill input[type="checkbox"]:checked {
  background-color: var(--gs-vivid-blue);
  border-color: var(--gs-vivid-blue);
}

.roi-cap-pill input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.roi-cap-pill span {
  white-space: nowrap;           /* never wrap label text */
}

/* Active pill: soft-blue bg (#e8f4ff — same hue as the savings
   callouts below, so the active capabilities feel related to the
   "active result" panel). No border — distinction is carried by
   bg color + the filled blue checkbox indicator. */
.roi-cap-pill:has(input[type="checkbox"]:checked) {
  background: #e8f4ff;
}

/* Full platform variant — same shape and inactive bg as the regular
   cap pills; the visual distinction is the tiny Giant Swarm logomark
   sitting where the round checkbox would otherwise be. That single
   detail makes the master-toggle role legible without a separate
   shape, border style, or color treatment.
   Active state: solid blue bg + white text (the logo's own colors
   stay — orange/coral on blue reads as on-brand). */
.roi-cap-pill--full {
  /* No justify-content override — inherits flex-start from the base
     .roi-cap-pill rule, so the icon + label sit left-aligned just
     like the regular cap pills with their checkbox + label. */
}

.roi-cap-pill--full input[type="checkbox"] {
  /* Hide the native checkbox — the GS logomark + pill state IS the
     indicator. Higher source order beats the visible-checkbox rule
     for regular caps above. */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  border: none;
}

/* Layers icon — slightly larger than the round checkbox slot since
   it carries a stronger semantic role (master toggle iconography).
   Vivid blue inactive; flips to white via currentColor when active. */
.roi-cap-pill__mark {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
  color: var(--gs-vivid-blue);
}

.roi-cap-pill--full:has(input[type="checkbox"]:checked) {
  background: var(--gs-vivid-blue);
  color: #ffffff;
}

/* Active full-platform: icon flips white via currentColor (the SVG
   strokes are stroke="currentColor" inline). */
.roi-cap-pill--full:has(input[type="checkbox"]:checked) .roi-cap-pill__mark {
  color: #ffffff;
}

/* ------------ DELIVERY MODEL TOGGLE — borderless, padded ----------
   No border on the track (was 1px gray that fought the card outline).
   Track bg matches the inactive cap-pill bg so the two control types
   feel like one family. Hover bg matches the active cap-pill bg
   (preview-the-pick affordance). Vertical padding bumped on labels. */

.roi-toggle-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;                  /* was 4px — more breathing room around active pill */
  border-radius: 999px;
  background: #eeeeee73;        /* was #f9fafb — match cap-pill inactive */
  border: 0;                    /* was 1px solid #e5e7eb */
  /* Removed fixed height — let labels define height now that
     they have more vertical padding. */
}

.roi-toggle {
  position: relative;
  flex: 1 1 0;
}

.roi-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.roi-toggle-label {
  display: flex;
  align-items: center;
  justify-content: center;
  /* width: 100% so each label fills its .roi-toggle slot, which has
     flex: 1 1 0. Without this the labels size to content and the
     two segments come out different widths. */
  width: 100%;
  box-sizing: border-box;
  padding: 10px 28px;            /* roomier horizontal so the pill feels more substantial */
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gs-blue);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.roi-toggle-label:hover {
  background: #e8f4ff;           /* matches active cap-pill bg */
}

/* Active toggle pill: solid blue + white text + soft lift shadow.
   Layered shadow (tight near + diffuse far) tuned softer than the
   card-hover values — at the toggle's smaller scale a higher alpha
   reads as harsh. Lower alpha + tighter blur sells the lift gently. */
.roi-toggle input[type="radio"]:checked + .roi-toggle-label {
  background: var(--gs-vivid-blue);
  color: #ffffff;
  box-shadow:
    0 2px 4px rgba(0, 38, 69, 0.08),
    0 6px 14px rgba(0, 38, 69, 0.12);
}

/* ------------ ANNUAL SAVINGS CALLOUT ------------ */

.roi-savings-card {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #e8f4ff;
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
}

.roi-savings-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.roi-savings-label {
  display: none;
  font-size: 0.74rem;
  text-transform: uppercase;
  font-weight: 500;
}

.roi-savings-value {
  font-size: 2rem;
  font-weight: 700;
  color: #007CFF;        /* was #0087ff — unified on canonical accent */
}

.roi-savings-caption {
  font-size: 0.85rem;
}

/* ------------ RESULTS TABLE (light, clean) ------------ */

.roi-results-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden; /* so table corners follow the radius */
  border: 1px solid #e5e7eb;
}

.roi-results-table {
  width: 100%;
  border-collapse: collapse;
  /* Standard body size (was 0.9rem = 14.4px) so the comparison
     table reads as primary content, not fine-print. Mobile rule
     below tightens to 0.85rem to fit two cost columns on narrow
     viewports. */
  font-size: var(--text-base);
}

.roi-results-table th,
.roi-results-table td {
  padding: 20px 24px;
  text-align: left;
}

.roi-results-table thead th {
  font-weight: 600;
}

.roi-results-table tr {
  border-top: 1px solid #e5e7eb;
}

/* Highlight "Hire X engineers" header a bit softer */
#diy-header-col {
  color: #002645;
}
#gs-eng-header-col{
  color: #007CFF;        /* was #0087ff */
}

/* Make Annual cost row stand out slightly */
.roi-results-table tbody tr:first-child td {
  font-weight: 600;
  color: #002645;
}

/* Highlight interactive GS annual cost number */
#annual-gs-cost {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  color: #007CFF;        /* was #0087ff */
  font-weight: 700;
  font-size: 1rem;
}

/* DIY cost number also slightly emphasized but less loud */
#annual-diy-cost {
  font-weight: 600;
  color: #002645;
  font-size: 1rem;
}

/* Table cell icons — inline SVG with explicit stroke-width for chunky
   rendering. Replaced the FA `<i>` glyphs which read too thin against
   the body text. Same approach we use in the delivery-model section. */
.roi-icon {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  vertical-align: -0.2em;
  margin-right: 0.35rem;
  flex-shrink: 0;
}
.roi-icon--x { color: #f65954; }
.roi-icon--check { color: #007CFF; }

/* ------------ RESPONSIVE ------------
   Mobile pill text is now 0.85rem (was shrinking to 0.65rem = 10px,
   which read as fine-print). Padding tightens slightly so longer
   labels like "AI Infrastructure" still fit, but the type itself
   stays at a readable size across all breakpoints. */

/* Tablet */
@media (max-width: 900px) {
  .roi-cap-pill {
    font-size: 0.9rem;
    padding: 0.5rem 0.85rem;
  }
  .roi-cap-pill--full { font-size: 0.9rem; }

  .roi-toggle-label {
    font-size: 0.9rem;
    padding: 8px 20px;
  }
}

/* Section padding alignment with the rest of Loom (3rem 1.5rem under 767px) */
@media (max-width: 767px) {
  .gs-calculator { padding: 3rem 1.5rem; }
  .gs-calculator__header { margin-bottom: 2rem; }
}

/* Mobile: 2-column grid, full-width "Full platform" */
@media (max-width: 640px) {
  .roi-cap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roi-cap-top,
  .roi-cap-bottom {
    grid-column: span 1;
  }

  .roi-cap-full {
    grid-column: span 2;         /* full width on mobile */
  }

  .roi-cap-pill {
    font-size: 0.9rem;
    padding: 0.5rem 0.85rem;
  }

  /* Center the full-platform pill content on mobile. On desktop it
     sits left-aligned (matching the regular caps' checkbox+label
     layout), but on mobile it spans the full grid row, so centered
     icon+label reads as the deliberate "master toggle". */
  .roi-cap-pill--full {
    justify-content: center;
  }

  .roi-toggle-group {
    width: 100%;
  }

  .roi-toggle-label {
    width: 100%;
  }
  .roi-calculator-box {
    padding: 30px 20px!important;
  }
  /* Make table fit mobile width — slightly tighter than desktop's
     16px so the two cost columns don't push the row too wide. */
  .roi-results-table {
    font-size: 0.85rem;
  }

  .roi-results-table th,
  .roi-results-table td {
    padding: 12px 12px;   /* reduced from desktop */
    vertical-align: top;
    overflow-wrap: anywhere; /* wrap long phrases, not individual letters */
    white-space: normal;
  }

  /* Headers: allow wrapping */
  .roi-results-table thead th {
    white-space: normal;
    line-height: 1.3;
  }

  /* First column = row labels (protect from letter-stacking) */
  .roi-results-table td:first-child {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  /* Icons shouldn't add horizontal pressure */
  .roi-results-table i {
    display: inline-block;
    min-width: 0;
  }
  .roi-savings-row {
    flex-direction: column;
    gap: 0px;
  }
}
@media (max-width: 420px) {
  .roi-toggle-label {
    font-size: .65rem;
    padding: 10px 0px;
  }
}