/* ---------------------------------------------------------------
   Pipeline Calculator
   Typography (family, weight) is intentionally NOT set here so the
   theme's own heading/body styles apply. Font sizes, color,
   spacing and layout come from the fields.
   Custom properties prefixed --cpc- are written inline in
   module.html from the module's color, size, padding and radius
   fields; --cpc-fill is written per slider and updated by
   module.js as the handle moves.

   The sliders are native <input type="range">. The filled part of
   the track is a gradient stop driven by --cpc-fill rather than a
   second element, so there is nothing to keep in sync with the
   handle position.

   The card grid is 12 columns so the three card widths divide it
   cleanly: compact spans a third, standard a half, full width all
   of it. With "keep the cards level" on, the rows spread to finish
   flush with the bottom of the sliders panel.
   --------------------------------------------------------------- */

.cs-calc {
  --cpc-max-width: 1240px;
  --cpc-gutter: clamp(1rem, 4vw, 2.5rem);

  position: relative;
  width: 100%;
  padding-top: var(--cpc-top-padding, 100px);
  padding-bottom: var(--cpc-bottom-padding, 100px);
  overflow-x: clip;
}

.cs-calc,
.cs-calc *,
.cs-calc *::before,
.cs-calc *::after {
  box-sizing: border-box;
}

.cs-calc--bg-color {
  background-color: var(--cpc-background, transparent);
}

/* ---------------------------- Background ---------------------------- */

.cs-calc__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  line-height: 0;
  pointer-events: none;
}

.cs-calc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cpc-image-position, center);
}

.cs-calc__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--cpc-overlay, transparent);
  pointer-events: none;
}

/* ------------------------------ Layout ------------------------------ */

.cs-calc__inner {
  position: relative;
  z-index: 2;
  width: min(100%, var(--cpc-max-width));
  margin: 0 auto;
  padding-left: var(--cpc-gutter);
  padding-right: var(--cpc-gutter);
}

/* Full width drops the container cap; the gutters stay so nothing
   touches the viewport edge. */
.cs-calc--align-full .cs-calc__inner {
  width: 100%;
  max-width: none;
}

.cs-calc__body {
  display: grid;
  grid-template-columns: minmax(0, var(--cpc-panel-width, 38%)) minmax(0, 1fr);
  align-items: start;
  gap: var(--cpc-card-gap, 14px);
}

/* Stretching the columns is what gives the card grid the panel's height
   to spread its rows into. */
.cs-calc--level .cs-calc__body {
  align-items: stretch;
}

/* The inputs panel is always first in the source so it reads first on
   mobile and to a screen reader. Putting it on the right is a visual
   reorder only, and the column widths swap with it. */
.cs-calc--panel-right .cs-calc__body {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--cpc-panel-width, 38%));
}

.cs-calc--panel-right .cs-calc__panel {
  grid-column: 2;
  grid-row: 1;
}

.cs-calc--panel-right .cs-calc__cards {
  grid-column: 1;
  grid-row: 1;
}

/* ------------------------------ Intro ------------------------------ */

.cs-calc__intro {
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.cs-calc .cs-calc__eyebrow {
  margin: 0 0 1rem;
  color: var(--cpc-eyebrow-color, inherit);
  font-size: var(--cpc-eyebrow-size, inherit);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.cs-calc .cs-calc__heading {
  margin: 0 0 1.25rem;
  color: var(--cpc-heading-color, inherit);
}

/* Each line is its own block so the break holds without relying on a hard
   return in the editor's text. */
.cs-calc .cs-calc__heading-line {
  display: block;
}

.cs-calc .cs-calc__content {
  max-width: 52ch;
  color: var(--cpc-content-color, inherit);
  font-size: var(--cpc-content-size, inherit);
}

.cs-calc .cs-calc__content p,
.cs-calc .cs-calc__content li,
.cs-calc .cs-calc__content span,
.cs-calc .cs-calc__content h1,
.cs-calc .cs-calc__content h2,
.cs-calc .cs-calc__content h3,
.cs-calc .cs-calc__content h4,
.cs-calc .cs-calc__content h5,
.cs-calc .cs-calc__content h6 {
  color: inherit;
  font-size: inherit;
}

.cs-calc .cs-calc__content > *:first-child {
  margin-top: 0;
}

.cs-calc .cs-calc__content > *:last-child {
  margin-bottom: 0;
}

/* --------------------------- Inputs panel --------------------------- */

.cs-calc__panel {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  padding: var(--cpc-panel-padding, 40px);
  border: 1px solid var(--cpc-panel-border, transparent);
  border-radius: var(--cpc-panel-radius, 12px);
  background-color: var(--cpc-panel-bg, transparent);
}

/* The footnote is pushed to the bottom so the panel reads as one block
   however tall the card column makes it. */
.cs-calc__panel .cs-calc__footnote {
  margin-top: auto;
}

.cs-calc__field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.cs-calc .cs-calc__field-name {
  margin: 0;
  color: var(--cpc-input-name-color, inherit);
  font-size: var(--cpc-input-name-size, inherit);
  /* The whole row is the control's label, so clicking the text focuses
     the slider -- the cursor should say so. */
  cursor: pointer;
}

.cs-calc .cs-calc__field-value {
  color: var(--cpc-input-value-color, inherit);
  font-size: var(--cpc-input-value-size, inherit);
  line-height: 1.1;
  white-space: nowrap;
  /* Fixed-width digits: without this the figure jitters sideways as the
     handle is dragged. */
  font-variant-numeric: tabular-nums;
}

/* ------------------------------ Sliders ------------------------------ */

.cs-calc__slider {
  --cpc-fill: 0%;
}

.cs-calc__range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: var(--cpc-thumb-size, 22px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}

.cs-calc__range:focus {
  outline: none;
}

.cs-calc__range:focus-visible {
  outline: 2px solid var(--cpc-fill-color, currentColor);
  outline-offset: 6px;
  border-radius: 999px;
}

/* The fill and the track are two stops of the same gradient, cut at
   --cpc-fill. Repeated per vendor pseudo-element because a selector list
   mixing them is dropped whole by every browser that does not know one. */
.cs-calc__range::-webkit-slider-runnable-track {
  height: var(--cpc-track-height, 6px);
  border-radius: 999px;
  background-image: linear-gradient(
    to right,
    var(--cpc-fill-color, currentColor) 0%,
    var(--cpc-fill-color, currentColor) var(--cpc-fill, 0%),
    var(--cpc-track-color, rgba(255, 255, 255, 0.15)) var(--cpc-fill, 0%),
    var(--cpc-track-color, rgba(255, 255, 255, 0.15)) 100%
  );
}

.cs-calc__range::-moz-range-track {
  height: var(--cpc-track-height, 6px);
  border: 0;
  border-radius: 999px;
  background-image: linear-gradient(
    to right,
    var(--cpc-fill-color, currentColor) 0%,
    var(--cpc-fill-color, currentColor) var(--cpc-fill, 0%),
    var(--cpc-track-color, rgba(255, 255, 255, 0.15)) var(--cpc-fill, 0%),
    var(--cpc-track-color, rgba(255, 255, 255, 0.15)) 100%
  );
}

.cs-calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--cpc-thumb-size, 22px);
  height: var(--cpc-thumb-size, 22px);
  border: 0;
  border-radius: 50%;
  background-color: var(--cpc-thumb-color, currentColor);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  /* Centers the handle on the track: the track is the shorter of the two. */
  margin-top: calc((var(--cpc-track-height, 6px) - var(--cpc-thumb-size, 22px)) / 2);
  transition: transform 120ms ease;
}

.cs-calc__range::-moz-range-thumb {
  width: var(--cpc-thumb-size, 22px);
  height: var(--cpc-thumb-size, 22px);
  border: 0;
  border-radius: 50%;
  background-color: var(--cpc-thumb-color, currentColor);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  transition: transform 120ms ease;
}

.cs-calc__range:hover::-webkit-slider-thumb,
.cs-calc__range:active::-webkit-slider-thumb {
  transform: scale(1.08);
}

.cs-calc__range:hover::-moz-range-thumb,
.cs-calc__range:active::-moz-range-thumb {
  transform: scale(1.08);
}

/* ------------------------------ Footnote ------------------------------ */

.cs-calc .cs-calc__footnote {
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--cpc-divider-color, transparent);
  color: var(--cpc-footnote-color, inherit);
  font-size: var(--cpc-footnote-size, inherit);
}

.cs-calc .cs-calc__footnote p,
.cs-calc .cs-calc__footnote li,
.cs-calc .cs-calc__footnote span {
  color: inherit;
  font-size: inherit;
}

.cs-calc .cs-calc__footnote > *:first-child {
  margin-top: 0;
}

.cs-calc .cs-calc__footnote > *:last-child {
  margin-bottom: 0;
}

/* -------------------------------- Cards -------------------------------- */

.cs-calc__cards {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--cpc-card-gap, 14px);
  align-content: start;
}

/* Spreads the rows over the height the panel sets, so the last card
   finishes level with the bottom of the sliders instead of running past. */
.cs-calc--level .cs-calc__cards {
  align-content: space-between;
}

.cs-calc__card--compact {
  grid-column: span 4;
}

.cs-calc--compact-2 .cs-calc__card--compact {
  grid-column: span 6;
}

.cs-calc--compact-4 .cs-calc__card--compact {
  grid-column: span 3;
}

.cs-calc__card--standard {
  grid-column: span 6;
}

.cs-calc__card--feature {
  grid-column: span 12;
}

.cs-calc__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  border: 1px solid var(--cpc-card-border, transparent);
  border-radius: var(--cpc-card-radius, 12px);
  background-color: var(--cpc-card-bg, transparent);
  overflow: hidden;
}

.cs-calc__card--compact {
  gap: 0.4rem;
  padding: clamp(0.85rem, 1.5vw, 1.15rem);
}

.cs-calc__card--feature {
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  /* The headline figure sits centered in whatever slack the row spreading
     hands it, rather than clinging to the top. */
  justify-content: center;
}

/* The glow is a pseudo-element rather than a background-image on the card
   so the card's own background color still shows through underneath it. */
.cs-calc__card--glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(
    120% 140% at 8% 100%,
    var(--cpc-card-glow, transparent) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.cs-calc__card > * {
  position: relative;
  z-index: 1;
}

.cs-calc .cs-calc__card-name {
  display: block;
  margin: 0;
  color: var(--cpc-card-name-color, inherit);
  font-size: var(--cpc-card-name-size, inherit);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* On an input card the label belongs to the field, so clicking it focuses. */
.cs-calc__card--entry label.cs-calc__card-name {
  cursor: pointer;
}

.cs-calc .cs-calc__card-value {
  margin: 0;
  color: var(--cpc-card-value-color, inherit);
  font-size: var(--cpc-card-value-size, 28px);
  line-height: 1.05;
  /* Fixed-width digits: keeps the figure from shifting as it changes. */
  font-variant-numeric: tabular-nums;
}

.cs-calc .cs-calc__card-sub {
  margin: 0;
  color: var(--cpc-card-sub-color, inherit);
  font-size: var(--cpc-card-sub-size, inherit);
  max-width: 60ch;
}

/* ------------------------------ Card inputs ------------------------------ */

.cs-calc__entry {
  display: flex;
  align-items: baseline;
  gap: 0.08em;
  /* The rule under the figure is the only thing saying "you can type
     here", now that the spinner buttons are gone. */
  padding-bottom: 0.12em;
  border-bottom: 1px solid var(--cpc-card-border, rgba(255, 255, 255, 0.18));
  transition: border-color 120ms ease;
}

.cs-calc__card--entry:hover .cs-calc__entry {
  border-bottom-color: var(--cpc-card-value-color, currentColor);
}

.cs-calc__card--entry:focus-within .cs-calc__entry {
  border-bottom-color: var(--cpc-fill-color, currentColor);
}

.cs-calc .cs-calc__number {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cpc-card-value-color, inherit);
  /* font shorthand first so the theme's family and weight come through,
     then the editor's size on top of it. */
  font: inherit;
  font-size: var(--cpc-card-value-size, 28px);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}

.cs-calc .cs-calc__number:focus {
  outline: none;
}

/* The ghost figure in an emptied field: the number color, dimmed, so it
   reads as a suggestion rather than an entry. */
.cs-calc .cs-calc__number::placeholder {
  color: var(--cpc-card-value-color, inherit);
  opacity: 0.32;
}

/* Spinner buttons are removed: at this size they crowd the figure, and the
   underline plus the keyboard arrows carry the affordance. */
.cs-calc__number::-webkit-outer-spin-button,
.cs-calc__number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Where it is supported the field shrinks to the digits, so the value and
   its % read as one figure. Elsewhere the field fills the card and the %
   sits at the far end, which is still a clean form row. */
@supports (field-sizing: content) {
  .cs-calc .cs-calc__number {
    field-sizing: content;
    width: auto;
    min-width: 1.5ch;
    max-width: 100%;
  }
}

.cs-calc .cs-calc__entry-suffix {
  color: var(--cpc-card-value-color, inherit);
  font-size: var(--cpc-card-value-size, 28px);
  line-height: 1.05;
}

/* --------------------------- Pinned-count marker --------------------------- */

.cs-calc .cs-calc__pin {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  color: var(--cpc-card-sub-color, inherit);
  font-size: max(10px, calc(var(--cpc-card-name-size, 12px) * 0.9));
}

/* display:flex above would otherwise beat the hidden attribute. */
.cs-calc .cs-calc__pin[hidden] {
  display: none;
}

.cs-calc .cs-calc__pin-note {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cs-calc .cs-calc__pin-reset {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cpc-fill-color, currentColor);
  font: inherit;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.cs-calc .cs-calc__pin-reset:focus-visible {
  outline: 2px solid var(--cpc-fill-color, currentColor);
  outline-offset: 3px;
}

/* ----------------------------- Responsive -----------------------------
   The per-card font size is a px value from the fields, so the smaller
   screens scale that same value rather than overriding it -- an editor's
   choice still shows through at every width. */

@media (max-width: 1024px) {
  .cs-calc {
    padding-top: calc(var(--cpc-top-padding, 100px) * 0.7);
    padding-bottom: calc(var(--cpc-bottom-padding, 100px) * 0.7);
  }

  .cs-calc__body,
  .cs-calc--panel-right .cs-calc__body {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Source order takes over once the columns collapse. */
  .cs-calc--panel-right .cs-calc__panel,
  .cs-calc--panel-right .cs-calc__cards {
    grid-column: 1;
    grid-row: auto;
  }

  /* Nothing to stay level with once the panel is above the cards rather
     than beside them. */
  .cs-calc--level .cs-calc__cards {
    align-content: start;
  }

  .cs-calc__panel {
    padding: calc(var(--cpc-panel-padding, 40px) * 0.8);
  }

  .cs-calc__panel .cs-calc__footnote {
    margin-top: 0;
  }

  .cs-calc__card--standard {
    grid-column: span 12;
  }

  .cs-calc .cs-calc__card-value,
  .cs-calc .cs-calc__number,
  .cs-calc .cs-calc__entry-suffix {
    font-size: calc(var(--cpc-card-value-size, 28px) * 0.85);
  }
}

@media (max-width: 600px) {
  .cs-calc {
    padding-top: calc(var(--cpc-top-padding, 100px) * 0.5);
    padding-bottom: calc(var(--cpc-bottom-padding, 100px) * 0.5);
  }

  .cs-calc__panel {
    padding: calc(var(--cpc-panel-padding, 40px) * 0.65);
  }

  /* Two compact cards a row still works at this width and keeps the funnel
     from turning into one very long column. */
  .cs-calc__card--compact,
  .cs-calc--compact-2 .cs-calc__card--compact,
  .cs-calc--compact-4 .cs-calc__card--compact {
    grid-column: span 6;
  }

  .cs-calc__field-head {
    /* The label and its figure stop competing for one line once the
       panel is this narrow. */
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .cs-calc .cs-calc__card-value,
  .cs-calc .cs-calc__number,
  .cs-calc .cs-calc__entry-suffix {
    font-size: calc(var(--cpc-card-value-size, 28px) * 0.72);
  }
}

@media (max-width: 380px) {
  .cs-calc__card--compact,
  .cs-calc--compact-2 .cs-calc__card--compact,
  .cs-calc--compact-4 .cs-calc__card--compact {
    grid-column: span 12;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-calc__range::-webkit-slider-thumb,
  .cs-calc__range::-moz-range-thumb {
    transition: none;
  }

  .cs-calc__range:hover::-webkit-slider-thumb,
  .cs-calc__range:active::-webkit-slider-thumb,
  .cs-calc__range:hover::-moz-range-thumb,
  .cs-calc__range:active::-moz-range-thumb {
    transform: none;
  }

  .cs-calc__entry {
    transition: none;
  }
}