/*
 * 1% Commission Calculator (REW)
 * Uses --clvr-* tokens from the `clever-design-tokens` handle (REW theme).
 * All selectors scoped under .occ. Responsive to the CONTAINER, not the viewport.
 *
 * Design guardrails baked in from component review feedback:
 *  - Font weight capped at 500 (no heavy bold — an AI tell).
 *  - Solid blue (indigo) is reserved for interactive/CTA only. Chart bars use a
 *    DIFFERENT blue (navy) so a bar never reads as a button.
 *  - Two surface colors max: white card + one light fill.
 *  - Width ladder: chart card at Wide (~840px); prose caps at Reading (~680px).
 *  - No structural headings; footnote stays >=14px for accessibility.
 */

.occ {
  /* Local weight ceiling — emphasis never exceeds 500. */
  --occ-weight-emphasis: 500;
  --occ-fs-sm: 0.875rem;   /* 14px — labels, notes, footnote (a11y floor) */
  --occ-field-h: 48px;

  container-type: inline-size;
  max-width: 840px; /* Wide tier — bars need room to breathe */
  margin-inline: auto;
  font-family: var(--clvr-font, "Inter", arial, sans-serif);
  font-weight: var(--clvr-weight-normal, 400);
  color: var(--clvr-text, #22293b);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

/* ---- Header --------------------------------------------------------------- */
.occ__header {
  margin-bottom: var(--clvr-sp-6, 24px);
}

.occ__headline {
  font-family: var(--clvr-font-heading, "Rubik", "Inter", sans-serif);
  font-weight: var(--occ-weight-emphasis);
  font-size: clamp(1.25rem, 1.05rem + 0.9cqi, 1.5rem);
  line-height: 1.25;
  color: var(--clvr-blue, #202e5b);
  margin: 0 0 var(--clvr-sp-3, 12px);
  max-width: 680px; /* prose caps at Reading */
}

.occ__subhead {
  font-size: 1rem;
  color: var(--clvr-text-secondary, #4b698b);
  margin: 0;
  max-width: 680px; /* prose caps at Reading */
}

/* ---- Card ----------------------------------------------------------------- */
.occ__card {
  background: var(--clvr-bg, #fff);
  border: 1px solid var(--clvr-border-light, #e2e8f0);
  border-radius: var(--clvr-radius, 8px);
  box-shadow: var(--clvr-shadow, 0 1px 3px rgba(12, 20, 42, 0.08));
  padding: var(--clvr-sp-8, 32px);
}

/* ---- Controls ------------------------------------------------------------- */
.occ__controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--clvr-sp-6, 24px);
  padding-bottom: var(--clvr-sp-6, 24px);
  margin-bottom: var(--clvr-sp-8, 32px);
  border-bottom: 1px solid var(--clvr-border-light, #e2e8f0);
}

.occ__control-label {
  display: block;
  font-size: var(--occ-fs-sm);
  font-weight: var(--occ-weight-emphasis);
  color: var(--clvr-text-secondary, #4b698b);
  margin-bottom: var(--clvr-sp-2, 8px);
}

/* Shared field sizing so input + select match height exactly */
.occ__field {
  height: var(--occ-field-h);
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--clvr-text, #22293b);
  background: var(--clvr-bg, #fff);
  border: 1px solid var(--clvr-border, #bfcbde);
  border-radius: var(--clvr-radius-sm, 4px);
  transition: border-color var(--clvr-transition, 200ms ease),
    box-shadow var(--clvr-transition, 200ms ease);
}

/* Editable currency input — the value itself is a manual input */
.occ__price-input {
  padding: 0 14px;
  font-size: 1.25rem;
  font-weight: var(--occ-weight-emphasis);
  color: var(--clvr-blue, #202e5b);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--clvr-sp-3, 12px);
}
.occ__price-input:hover {
  box-shadow: var(--clvr-shadow, 0 2px 8px rgba(12, 20, 42, 0.1));
}
.occ__price-input:focus {
  border-color: var(--clvr-orange, #2f4384);
  outline: 2px solid var(--clvr-orange, #2f4384);
  outline-offset: -2px;
  box-shadow: none;
}

/* Range slider — filled track to the thumb via --clvr-slider-fill (indigo = interactive) */
.occ__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--clvr-radius-pill, 9999px);
  background:
    linear-gradient(
      to right,
      var(--clvr-orange, #2f4384) 0%,
      var(--clvr-orange, #2f4384) var(--clvr-slider-fill, 50%),
      var(--clvr-bg-neutral, #f0f0f0) var(--clvr-slider-fill, 50%),
      var(--clvr-bg-neutral, #f0f0f0) 100%
    );
  outline: none;
  cursor: pointer;
}
.occ__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--clvr-orange, #2f4384);
  border: 3px solid var(--clvr-bg, #fff);
  box-shadow: var(--clvr-shadow, 0 2px 8px rgba(12, 20, 42, 0.15));
  cursor: pointer;
}
.occ__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--clvr-orange, #2f4384);
  border: 3px solid var(--clvr-bg, #fff);
  box-shadow: var(--clvr-shadow, 0 2px 8px rgba(12, 20, 42, 0.15));
  cursor: pointer;
}
.occ__slider::-moz-range-progress {
  height: 6px;
  border-radius: var(--clvr-radius-pill, 9999px);
  background: var(--clvr-orange, #2f4384);
}
@media (prefers-reduced-motion: no-preference) {
  .occ__slider::-webkit-slider-thumb { transition: transform var(--clvr-transition, 200ms ease); }
  .occ__slider:hover::-webkit-slider-thumb { transform: scale(1.08); }
}
.occ__slider:focus-visible { outline: 2px solid var(--clvr-orange, #2f4384); outline-offset: 4px; }
.occ__slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--clvr-orange, #2f4384); outline-offset: 2px; }

/* Select */
.occ__select-wrap { position: relative; }
.occ__select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0 40px 0 14px;
  line-height: 1.6;
  cursor: pointer;
}
.occ__select:hover { box-shadow: var(--clvr-shadow, 0 2px 8px rgba(12, 20, 42, 0.1)); }
.occ__select:focus {
  border-color: var(--clvr-orange, #2f4384);
  outline: 2px solid var(--clvr-orange, #2f4384);
  outline-offset: -2px;
  box-shadow: none;
}
.occ__select-caret {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clvr-text-secondary, #4b698b);
  pointer-events: none;
}

/* ---- Bars (navy — a DIFFERENT blue than the interactive indigo) ----------- */
.occ__bars {
  display: flex;
  flex-direction: column;
  gap: var(--clvr-sp-6, 24px);
}

.occ__bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--clvr-sp-3, 12px);
  margin-bottom: var(--clvr-sp-2, 8px);
}
.occ__bar-name {
  display: inline-flex;
  align-items: center;
  gap: var(--clvr-sp-2, 8px);
  font-weight: var(--occ-weight-emphasis);
  font-size: var(--occ-fs-sm);
  color: var(--clvr-text, #22293b);
}
.occ__bar-icon { flex: 0 0 auto; color: var(--clvr-text-muted, #86a5c6); }
.occ__bar-rate {
  flex: 0 0 auto;
  font-weight: var(--occ-weight-emphasis);
  font-size: var(--occ-fs-sm);
  color: var(--clvr-text-secondary, #4b698b);
  font-variant-numeric: tabular-nums;
}

.occ__bar-track {
  position: relative;
  width: 100%;
  height: 44px;
  background: var(--clvr-bg-subtle, #f5f8fc);
  border-radius: var(--clvr-radius-sm, 4px);
  overflow: hidden;
}
.occ__bar-fill {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 96px;
  padding-inline: var(--clvr-sp-3, 12px);
  border-radius: var(--clvr-radius-sm, 4px);
  background: var(--clvr-blue, #202e5b); /* solid navy — both bars, no gradient */
}
.occ__bar-fill--low { opacity: 0.86; } /* subtle differentiation, same hue family */
.occ__bar-amount {
  font-weight: var(--occ-weight-emphasis);
  font-size: 1rem;
  color: var(--clvr-text-inverse, #fff);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.occ__floor-note {
  margin: var(--clvr-sp-2, 8px) 0 0;
  font-size: var(--occ-fs-sm);
  color: var(--clvr-text-secondary, #4b698b);
  border-left: 3px solid var(--clvr-border, #bfcbde);
  padding-left: var(--clvr-sp-3, 12px);
}

/* ---- Savings (calm; the CTA carries conversion focus) --------------------- */
.occ__savings {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--clvr-sp-2, 8px);
  margin-top: var(--clvr-sp-8, 32px);
  padding: var(--clvr-sp-4, 16px) var(--clvr-sp-6, 24px);
  background: var(--clvr-bg-subtle, #f5f8fc);
  border: 1px solid var(--clvr-border-light, #e2e8f0);
  border-radius: var(--clvr-radius, 8px);
}
.occ__savings-label {
  display: block;
  font-weight: var(--occ-weight-emphasis);
  font-size: var(--occ-fs-sm);
  line-height: 1.4;
  color: var(--clvr-text-secondary, #4b698b);
}
/* Icon flows inline with the first line so it stays put when the label wraps. */
.occ__savings-icon {
  display: inline-block;
  vertical-align: -0.18em;
  margin-right: var(--clvr-sp-2, 8px);
  color: var(--clvr-blue, #202e5b);
}
.occ__savings-value {
  font-family: var(--clvr-font-heading, "Rubik", "Inter", sans-serif);
  font-weight: var(--occ-weight-emphasis);
  font-size: clamp(1.5rem, 1.2rem + 1.1cqi, 1.75rem);
  line-height: 1;
  color: var(--clvr-blue, #202e5b);
  font-variant-numeric: tabular-nums;
  border-radius: var(--clvr-radius-sm, 4px);
  padding: 2px 4px;
}

/* Live-update highlight — makes the change obvious (esp. on mobile) */
@media (prefers-reduced-motion: no-preference) {
  .occ__savings-value.occ--flash {
    animation: occ-flash 950ms ease;
  }
  @keyframes occ-flash {
    0%   { background: color-mix(in srgb, var(--clvr-orange, #2f4384) 22%, transparent); }
    100% { background: transparent; }
  }
}

/* ---- CTA (the ONLY element with CTA styling / solid indigo) --------------- */
.occ__cta-row { margin-top: var(--clvr-sp-6, 24px); }
.occ a.occ__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--occ-field-h);
  padding: 12px 28px;
  font-family: inherit;
  font-weight: var(--occ-weight-emphasis);
  font-size: 1.0625rem;
  text-align: center;
  text-decoration: none;
  background: var(--clvr-orange, #2f4384);
  border: 1px solid var(--clvr-orange, #2f4384);
  border-radius: var(--clvr-btn-radius, 4px);
  transition: background-color var(--clvr-transition, 200ms ease),
    border-color var(--clvr-transition, 200ms ease);
}
.occ a.occ__cta,
.occ a.occ__cta:link,
.occ a.occ__cta:visited,
.occ a.occ__cta:hover,
.occ a.occ__cta:focus { color: var(--clvr-on-accent, #fff) !important; }
.occ a.occ__cta:hover {
  background: var(--clvr-orange-dark, #27386f);
  border-color: var(--clvr-orange-dark, #27386f);
}
.occ a.occ__cta:focus-visible { outline: 2px solid var(--clvr-orange, #2f4384); outline-offset: 3px; }

/* ---- Source / methodology (>=14px) --------------------------------------- */
.occ__source {
  margin: var(--clvr-sp-6, 24px) 0 0;
  font-size: var(--occ-fs-sm);
  line-height: 1.5;
  color: var(--clvr-text-muted, #86a5c6);
  max-width: 680px; /* prose caps at Reading */
}

/* ---- Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .occ__bar-fill { transition: width 480ms cubic-bezier(0.22, 1, 0.36, 1); }
}

/* ---- Container responsiveness --------------------------------------------- */
@container (min-width: 560px) {
  .occ__controls {
    grid-template-columns: 1.6fr 1fr;
    align-items: start;
  }
  .occ a.occ__cta { width: auto; }
  .occ__savings {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--clvr-sp-4, 16px);
  }
}