/* ===== RDV Media Sponsor Calculator — frontend styles (all prefixed .ytsc-) =====
   Scoped to the .ytsc-calculator wrapper. No global selectors. */

.ytsc-calculator {
  --ytsc-radius-md: calc(var(--ytsc-radius, 14px) * 0.6);
  --ytsc-radius-sm: calc(var(--ytsc-radius, 14px) * 0.4);
  --ytsc-radius-lg: var(--ytsc-radius, 14px);
  font-family: var(--ytsc-font, system-ui), system-ui, sans-serif;
  color: var(--ytsc-text);
  background: var(--ytsc-bg);
  max-width: var(--ytsc-max-width, 1180px);
  margin-inline: auto;
  padding: clamp(16px, 4vw, 48px) clamp(12px, 3vw, 32px);
  border-radius: var(--ytsc-radius-lg);
  box-sizing: border-box;
  position: relative;
  line-height: 1.6;
}
.ytsc-calculator *,
.ytsc-calculator *::before,
.ytsc-calculator *::after {
  box-sizing: border-box;
}

/* Font families */
.ytsc-font-inter { --ytsc-font: 'Inter', system-ui, sans-serif; }
.ytsc-font-poppins { --ytsc-font: 'Poppins', system-ui, sans-serif; }
.ytsc-font-roboto { --ytsc-font: 'Roboto', system-ui, sans-serif; }
.ytsc-font-lato { --ytsc-font: 'Lato', system-ui, sans-serif; }
.ytsc-font-montserrat { --ytsc-font: 'Montserrat', system-ui, sans-serif; }
.ytsc-font-opensans { --ytsc-font: 'Open Sans', system-ui, sans-serif; }
.ytsc-font-spacegrotesk { --ytsc-font: 'Space Grotesk', system-ui, sans-serif; }
.ytsc-font-dmserif { --ytsc-font: 'DM Serif Display', Georgia, serif; }
.ytsc-font-system { --ytsc-font: system-ui, sans-serif; }

/* Theme toggle button */
.ytsc-theme-toggle {
  position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 9999px; border: 1px solid var(--ytsc-border);
  background: var(--ytsc-surface); color: var(--ytsc-text-muted);
  z-index: 10;
}
.ytsc-theme-toggle:hover { color: var(--ytsc-text); border-color: var(--ytsc-accent); }

/* Hero */
.ytsc-hero { margin-bottom: clamp(24px, 5vw, 40px); }
.ytsc-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ytsc-accent);
  margin-bottom: 12px;
}
.ytsc-hero-title {
  font-size: clamp(1.5rem, 1.2rem + 2vw, 2.5rem); line-height: 1.05;
  font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px;
}
.ytsc-lede { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); color: #8c8c8c; }

/* Layout grid */
.ytsc-calc-section { margin-bottom: 32px; }
.ytsc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start;
}

.ytsc-card {
  background: var(--ytsc-surface);
  border: 1px solid var(--ytsc-border);
  border-radius: var(--ytsc-radius-lg);
  padding: clamp(16px, 3vw, 32px);
  box-shadow: var(--ytsc-shadow, none);
}
.ytsc-card-title {
  font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 24px;
}
.ytsc-card-subtitle {
  font-size: 0.8125rem; font-weight: 600; color: #8c8c8c;
  margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.06em;
}

/* Fields */
.ytsc-field { margin-bottom: 28px; }
.ytsc-field:last-child { margin-bottom: 0; }
.ytsc-field-label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 4px; }
.ytsc-field-hint { font-size: 0.75rem; color: #8c8c8c; margin-bottom: 12px; }
.ytsc-field-row {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;
}
.ytsc-field-value {
  font-size: 1rem; font-weight: 600; color: var(--ytsc-primary);
  font-variant-numeric: tabular-nums;
}
.ytsc-field-meta { font-size: 0.75rem; color: #8c8c8c; margin-top: 8px; }

/* Range sliders */
.ytsc-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  background: var(--ytsc-surface-offset);
  border-radius: 9999px; outline: none;
}
.ytsc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ytsc-primary);
  border: 3px solid var(--ytsc-surface);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15); cursor: pointer;
}
.ytsc-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ytsc-primary);
  border: 3px solid var(--ytsc-surface);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15); cursor: pointer;
}
.ytsc-range-ticks {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-size: 0.75rem; color: #8c8c8c;
}

/* Segmented control */
.ytsc-segmented {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  background: var(--ytsc-surface-offset); padding: 4px;
  border-radius: var(--ytsc-radius-md);
}
.ytsc-seg {
  padding: 8px 4px; font-size: 0.75rem; font-weight: 500;
  border-radius: var(--ytsc-radius-sm); white-space: nowrap;
  color: #8c8c8c; cursor: pointer; background: transparent; border: none;
}
.ytsc-seg:hover { color: var(--ytsc-text); }
.ytsc-seg.ytsc-active {
  background: var(--ytsc-surface); color: var(--ytsc-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08); font-weight: 600;
}
.ytsc-seg.ytsc-small { padding: 4px 12px; font-size: 0.75rem; }
.ytsc-seg-group { display: flex; gap: 4px; background: var(--ytsc-surface-offset); padding: 4px; border-radius: var(--ytsc-radius-md); }

/* Switch */
.ytsc-toggle-field { padding-top: 16px; border-top: 1px solid var(--ytsc-border); }
.ytsc-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.ytsc-switch input { position: absolute; opacity: 0; }
.ytsc-switch-track {
  width: 44px; height: 24px; flex: none; background: var(--ytsc-border);
  border-radius: 9999px; position: relative; transition: background 180ms;
}
.ytsc-switch-track::after {
  content: ""; position: absolute; width: 18px; height: 18px; top: 3px; left: 3px;
  background: #fff; border-radius: 50%; transition: transform 180ms; box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.ytsc-switch input:checked + .ytsc-switch-track { background: var(--ytsc-primary); }
.ytsc-switch input:checked + .ytsc-switch-track::after { transform: translateX(20px); }
.ytsc-switch-text { display: flex; flex-direction: column; }
.ytsc-switch-text strong { font-size: 0.875rem; font-weight: 600; }
.ytsc-switch-text small { font-size: 0.75rem; color: var(--ytsc-text-muted); }

/* Output */
.ytsc-output-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.ytsc-output-header .ytsc-card-title { margin-bottom: 0; }
.ytsc-badge {
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 9999px;
  background: var(--ytsc-surface-offset); color: var(--ytsc-primary);
}
.ytsc-price-display {
  background: rgba(229, 30, 38, 0.15);
  color: #e51e26; border-radius: var(--ytsc-radius-lg);
  padding: 32px 24px; margin-bottom: 24px; text-align: center;
}
.ytsc-price-main { display: flex; justify-content: center; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ytsc-price-low, .ytsc-price-high {
  font-size: clamp(1.25rem, 1rem + 1.5vw, 2rem); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.ytsc-price-dash { font-size: 1.125rem; opacity: 0.7; }
.ytsc-price-sub { font-size: 0.75rem; font-weight: 500; opacity: 0.85; margin-top: 8px; letter-spacing: 0.04em; text-transform: uppercase; }

.ytsc-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.ytsc-kpi {
  background: var(--ytsc-surface-offset); border: 1px solid var(--ytsc-border);
  border-radius: var(--ytsc-radius-md); padding: 12px; text-align: center;
}
.ytsc-kpi-label { display: block; font-size: 0.7rem; font-weight: 500; color: #303030; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.ytsc-kpi-value { display: block; font-size: 1rem; font-weight: 600; color: var(--ytsc-text); font-variant-numeric: tabular-nums; }

.ytsc-model-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--ytsc-border); margin-bottom: 12px;
}
.ytsc-model-label { font-size: 0.75rem; color: #8c8c8c; font-weight: 500; }
.ytsc-delta-note { font-size: 0.75rem; color: #8c8c8c; line-height: 1.5; min-height: 2.5em; }
.ytsc-delta-pos { color: #2f8f6b; font-weight: 600; }
.ytsc-delta-neg { color: #b5486a; font-weight: 600; }
.ytsc-delta-zero { color: #8c8c8c; font-weight: 600; }

/* Sensitivity */
.ytsc-sensitivity { margin-bottom: 32px; }
.ytsc-section-head { margin-bottom: 32px; max-width: 100%; }
.ytsc-section-head h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
.ytsc-section-lede { font-size: 1rem; color: #8c8c8c; }
.ytsc-sens-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: stretch; }
.ytsc-sens-chart-card, .ytsc-sens-table-card { display: flex; flex-direction: column; }
.ytsc-chart-wrap { flex: 1; min-height: 320px; position: relative; }
.ytsc-table-scroll { flex: 1; overflow-x: auto; }
.ytsc-sens-table { width: 100%; border-collapse: collapse; }
.ytsc-sens-table th, .ytsc-sens-table td {
  padding: 12px 8px; text-align: right; font-size: 0.875rem;
  font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--ytsc-border);
}
.ytsc-sens-table th {
  font-size: 0.7rem; font-weight: 600; color: #8c8c8c;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ytsc-sens-table td:first-child, .ytsc-sens-table th:first-child { text-align: left; }
.ytsc-sens-table tbody tr:hover { background: var(--ytsc-surface-offset); }
.ytsc-sens-table tr.ytsc-current { background: var(--ytsc-surface-offset); font-weight: 600; }
.ytsc-table-foot { font-size: 0.7rem; color: #8c8c8c; margin-top: 12px; line-height: 1.5; }

/* Methodology */
.ytsc-methodology {
  background: #fff; border-radius: var(--ytsc-radius-lg);
  padding: clamp(24px, 4vw, 48px); margin-bottom: 24px;
}
.ytsc-methodology h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 24px; }
.ytsc-method-text { font-size: 0.9375rem; color: #8c8c8c; line-height: 1.7; margin-bottom: 16px; }
.ytsc-disclaimer { font-size: 0.75rem; color: #8c8c8c; line-height: 1.6; font-style: italic; }

.ytsc-footer { text-align: center; padding: 24px 0; font-size: 0.75rem; color: #8c8c8c; }

/* Responsive */
@media (max-width: 880px) {
  .ytsc-grid { grid-template-columns: 1fr; }
  .ytsc-sens-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ytsc-segmented { grid-template-columns: repeat(2, 1fr); }
  .ytsc-kpi-row { grid-template-columns: 1fr; }
  .ytsc-price-display { padding: 24px 16px; }
}

/* Dark theme */
.ytsc-calculator[data-ytsc-theme='dark'] {
  --ytsc-bg: #0d1420;
  --ytsc-surface: #141d2b;
  --ytsc-surface-offset: #1c2633;
  --ytsc-text: #e3e8ef;
  --ytsc-text-muted: #93a1b3;
  --ytsc-border: #2c394a;
  --ytsc-primary: #6ea3d6;
  --ytsc-accent: #7fb3e0;
}
.ytsc-calculator[data-ytsc-theme='dark'] .ytsc-switch-track::after { background: #1a2230; }

@media (prefers-reduced-motion: reduce) {
  .ytsc-calculator *, .ytsc-calculator *::before, .ytsc-calculator *::after {
    animation-duration: 0.01ms !important; transition-duration: 0.01ms !important;
  }
}