/* ------------------------------------------------
   Ad Revenue Calculator (/revenue-calculator/)
   All visual values use tokens from variables.css.
   `.visually-hidden` is reused from global/utilities.css.
   ------------------------------------------------ */

/* Hero -- vertical rhythm matched to the /api-demo/ hero */
.revcalc-hero {
  text-align: center;
  padding-block: var(--space-12) var(--space-8);
}

.revcalc-hero__title {
  font-size: var(--font-size-5xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 auto var(--space-4);
  max-width: 20ch;
}

/* Accent phrase: same recipe as the /api-demo/ hero accent
   (Outfit heading face, medium weight, brand gradient text). */
.revcalc-hero__accent {
  font-family: var(--font-heading);
  font-weight: 500;
}

.revcalc-hero__subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  max-width: 52ch;
  margin: 0 auto;
}

/* Layout -- vertical rhythm matched to the /api-demo/ content section */
.revcalc {
  padding-block: var(--space-4) var(--space-16);
}

.revcalc__grid {
  display: grid;
  gap: var(--space-6);
  align-items: stretch;
}

@media (min-width: 64rem) {
  .revcalc__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-8);
  }
}

/* Form */
.revcalc__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
}

/* Single column: dropdowns and sliders stack rather than sitting two-up. */
.revcalc__row {
  display: grid;
  gap: var(--space-5);
}

.revcalc__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.revcalc__label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-heading);
}

.revcalc__input,
.revcalc__select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--color-heading);
  font-family: var(--font-text);
  font-size: var(--font-size-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.revcalc__input::placeholder {
  color: var(--color-text-muted);
}

.revcalc__input:focus-visible,
.revcalc__select:focus-visible {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: var(--shadow-focus);
}

.revcalc__input[aria-invalid="true"] {
  border-color: var(--color-red);
}

.revcalc__error {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-red);
}

/* Sliders */
.revcalc__slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.revcalc__slider-value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-blue);
  font-variant-numeric: tabular-nums;
}

.revcalc__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.5rem;
  background: transparent;
  cursor: pointer;
}

/* WebKit: the track carries the filled gradient (JS sets --revcalc-fill) over a
   neutral base, so the unfilled right side is never blue. */
.revcalc__slider::-webkit-slider-runnable-track {
  height: 0.375rem;
  border-radius: var(--radius-full);
  background-color: var(--glass-bg);
  background-image: linear-gradient(to right, var(--color-blue), var(--color-blue));
  background-size: var(--revcalc-fill, 0%) 100%;
  background-repeat: no-repeat;
}

.revcalc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: -0.25rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  border: 2px solid var(--color-blue);
  box-shadow: 0 0 0 0.1875rem var(--tint-blue-15), var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.revcalc__slider:hover::-webkit-slider-thumb,
.revcalc__slider:active::-webkit-slider-thumb {
  transform: scale(1.12);
}

/* Firefox: ::-moz-range-progress fills the left side automatically and the track
   is the neutral base, so again there is no blue on the right. */
.revcalc__slider::-moz-range-track {
  height: 0.375rem;
  border-radius: var(--radius-full);
  background: var(--glass-bg);
}

.revcalc__slider::-moz-range-progress {
  height: 0.375rem;
  border-radius: var(--radius-full);
  background: var(--color-blue);
}

.revcalc__slider::-moz-range-thumb {
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid var(--color-blue);
  border-radius: var(--radius-full);
  background: var(--color-white);
  box-shadow: 0 0 0 0.1875rem var(--tint-blue-15);
}

.revcalc__slider:focus-visible {
  outline: none;
}

.revcalc__slider:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--shadow-focus), var(--shadow-sm);
}

.revcalc__slider:focus-visible::-moz-range-thumb {
  box-shadow: var(--shadow-focus);
}

.revcalc__submit {
  position: relative;
  /* Anchor to the bottom so the button lines up with the results panel base
     when the form is the shorter column. */
  margin-top: auto;
  width: 100%;
}

/* After the domain changes, nudge the visitor to recalculate by reusing the
   shared button-pulse ring (keyframe defined in shared/cta-banner.css). */
.revcalc__submit--pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: button-pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

/* Results */
.revcalc__results {
  padding: var(--space-6);
  min-height: 22rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.revcalc__placeholder {
  text-align: center;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.revcalc__placeholder[hidden],
.revcalc__result[hidden] {
  display: none;
}

.revcalc__placeholder-icon {
  color: var(--color-blue);
}

.revcalc__placeholder-text {
  max-width: 28ch;
  margin: 0;
}

/* Loading -- shown for a moment after Calculate, so the estimate feels worked
   out rather than instant. */
.revcalc__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

.revcalc__loading[hidden] {
  display: none;
}

.revcalc__spinner {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  border: 3px solid var(--glass-border);
  border-top-color: var(--color-blue);
  animation: revcalc-spin 0.75s linear infinite;
}

@keyframes revcalc-spin {
  to { transform: rotate(360deg); }
}

.revcalc__loading-text {
  margin: 0;
  min-height: 1.25rem;
  font-size: var(--font-size-sm);
}

.revcalc__results[data-state="revealed"] {
  justify-content: flex-start;
}

/* Fill the panel height so the disclaimer can anchor to the bottom, keeping the
   results the same height as the form. */
.revcalc__result {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.revcalc__result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.revcalc__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-green);
  margin: 0;
}

.revcalc__result-title {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  font-weight: 500;
  margin: 0;
  flex: 1 1 100%;
  order: 3;
}

/* The period switch is the reusable .segmented component; only its placement is
   local. */
.revcalc__period {
  margin-left: auto;
}

.revcalc__headline {
  margin: 0;
  line-height: 1;
}

.revcalc__headline-num {
  font-family: var(--font-heading);
  font-size: var(--font-size-6xl);
  font-weight: 700;
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.revcalc__subline {
  margin: var(--space-2) 0 var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

/* Chart */
.revcalc__chart {
  width: 100%;
}

.revcalc__chart svg {
  width: 100%;
  height: auto;
  display: block;
}

.revcalc__chart-bar {
  fill: url(#revcalc-bar);
  fill-opacity: 0.5;
  transition: fill-opacity var(--transition-fast);
}

.revcalc__chart-bar:hover {
  fill-opacity: 0.9;
}

.revcalc__bar-top {
  stop-color: var(--color-blue);
  stop-opacity: 1;
}

.revcalc__bar-bottom {
  stop-color: var(--color-blue);
  stop-opacity: 0.35;
}

.revcalc__chart-area {
  fill: url(#revcalc-area);
}

.revcalc__area-top {
  stop-color: var(--color-green);
  stop-opacity: 0.3;
}

.revcalc__area-bottom {
  stop-color: var(--color-green);
  stop-opacity: 0;
}

.revcalc__chart-label {
  fill: var(--color-text-muted);
  font-family: var(--font-text);
  font-size: 9px;
}

.revcalc__chart-line {
  fill: none;
  stroke: var(--color-green);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.revcalc__chart-line--draw {
  stroke-dasharray: var(--revcalc-line-len, 1000);
  stroke-dashoffset: var(--revcalc-line-len, 1000);
  animation: revcalc-draw 1.4s var(--easing-emphasis) forwards;
}

@keyframes revcalc-draw {
  to { stroke-dashoffset: 0; }
}

.revcalc__legend {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.revcalc__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.revcalc__legend-item::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--tint-blue-20);
}

.revcalc__legend-item--line::before {
  height: 0;
  border-radius: 0;
  border-top: 2.5px solid var(--color-green);
  background: none;
}

/* Breakdown */
.revcalc__breakdown {
  list-style: none;
  margin: var(--space-6) 0 var(--space-4);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.revcalc__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}

.revcalc__stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.revcalc__stat-value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
}

/* Settle flash -- a brief highlight when the numbers come to rest after an
   update, so a live change is noticeable. Triggered by toggling .revcalc--flash. */
.revcalc__stat.revcalc--flash {
  animation: revcalc-card-flash 560ms var(--easing-emphasis);
}

@keyframes revcalc-card-flash {
  0% { border-color: var(--glass-border); background: var(--glass-bg); }
  30% { border-color: var(--color-blue); background: var(--tint-blue-8); }
  100% { border-color: var(--glass-border); background: var(--glass-bg); }
}

.revcalc__headline-num.revcalc--flash {
  animation: revcalc-num-flash 500ms ease;
}

@keyframes revcalc-num-flash {
  0% { color: var(--color-heading); }
  25% { color: var(--color-blue); }
  100% { color: var(--color-heading); }
}

.revcalc__disclaimer {
  margin: auto 0 0;
  padding-top: var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.revcalc__cta {
  margin-top: var(--space-10);
}

@media (max-width: 40rem) {
  .revcalc__breakdown {
    grid-template-columns: 1fr;
  }
  .revcalc__headline-num {
    font-size: var(--font-size-5xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .revcalc__chart-line--draw {
    animation: none;
    stroke-dashoffset: 0;
  }
  .revcalc__spinner,
  .revcalc__stat.revcalc--flash,
  .revcalc__headline-num.revcalc--flash,
  .revcalc__submit--pulse::after {
    animation: none;
  }
}