/* ==========================================================================
   Wolfpack AI Tool ROI Calculator — wolfstrategyllc.com brand
   Navy #000B29 · coral #F95954 (rationed) · Roboto 700 headings · Montserrat body
   Design system inherited from wp-rates-page (css/rates.css), as on ai-coaching.

   Coral discipline, in one place so it can't drift: coral is allowed on the
   intro kicker, the solid CTA button, the interactive control accents
   (slider thumbs, the selected toggle fill, the live slider values), link
   hover, and the focus ring. Nothing else — headline stats are white unless
   the sign colors take over. Where coral is a FILL, text on it is navy
   (5.8:1), never white (fails AA).
   ========================================================================== */

:root {
  --navy:      #000B29;
  --coral:     #F95954;
  --white:     #FFFFFF;
  --muted:     #BFC2CA;
  --faint:     #808594;   /* 5.3:1 on navy — AA for normal text, labels only */
  --surface:   #0A1435;
  --surface-2: #101B3F;
  --line:      #222E52;
  --positive:  #4ADE80;
  --negative:  #F87171;
  --radius:    4px;
  --measure:   1100px;
  --mono: ui-monospace, "Cascadia Mono", "Roboto Mono", Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--navy);
  color: var(--white);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 16px;         /* never smaller: 16px stops iOS zooming on focus */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Roboto', system-ui, sans-serif; font-weight: 700; line-height: 1.15; }

a { color: var(--white); }
a:hover { color: var(--coral); }
a:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 24px; }

/* Small monospace labels — the "engineering document" voice */
.k {
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  background: var(--navy);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* .brand is layout only; the type treatment lives on .brand-wordmark below, so
   this page's header matches every other page's .nav__brand / .nav__wordmark
   split rather than carrying its own one-off styling. */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  text-decoration: none;
}

.brand:hover { color: var(--white); }

/* The shared header wordmark treatment. Identical to .nav__wordmark in
   rates/, ai-coaching/, portfolio/, case-study-assets/, and sm3-assets/ —
   one company name, one type treatment, every page. No white-space: nowrap,
   so it wraps rather than overflowing at phone width. */
.brand-wordmark {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.back-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

/* Coral: link hover */
.back-link:hover { color: var(--coral); }

/* ==========================================================================
   Intro
   ========================================================================== */

.intro {
  padding: 56px 0 36px;
  max-width: 680px;
}

/* Coral: the kicker */
.intro-kicker {
  color: var(--coral);
  margin-bottom: 14px;
}

.intro h1 {
  font-size: 2.1rem;
  margin-bottom: 14px;
}

.intro p { color: var(--muted); }

/* ==========================================================================
   Calculator grid & panels
   ========================================================================== */

.calculator-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
  padding-bottom: 56px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}

.panel-title {
  font-family: var(--mono);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 22px;
}

/* ==========================================================================
   Form fields
   ========================================================================== */

.field-group {
  border: none;
  margin-bottom: 20px;
}

.field-group legend {
  padding-bottom: 8px;
  font-size: 0.9rem;
  color: var(--muted);
}

.toggle-row {
  display: flex;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px;
}

.toggle-option {
  flex: 1;
  text-align: center;
  padding: 8px 12px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--muted);
}

.toggle-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Coral: selected toggle fill — text on it is navy, never white (AA) */
.toggle-option:has(input:checked) {
  background: var(--coral);
  color: var(--navy);
  font-weight: 600;
}

.field { margin-bottom: 20px; }

.field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.field-pair .field { margin-bottom: 0; }

.field label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 8px;
}

/* Coral: live slider values (paired with the coral slider thumbs) */
.live-val {
  color: var(--coral);
  font-weight: 600;
}

.field input[type="number"],
.field input[type="text"].field-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--white);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 1rem;
}

/* Coral: the focus ring */
.field input[type="number"]:focus,
.field input[type="text"].field-input:focus,
.field input[type="range"]:focus {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

.input-prefix { position: relative; }

.input-prefix .prefix-symbol {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  font-size: 1rem;
  z-index: 1;
}

.field input[type="text"].currency-input { padding-left: 26px; }

/* Coral: slider thumbs */
.field input[type="range"] {
  width: 100%;
  accent-color: var(--coral);
}

.field-hint {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--faint);
}

.hidden { display: none; }

/* ==========================================================================
   Results
   ========================================================================== */

.results-panel {
  position: sticky;
  top: 24px;
}

.result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.result-row:last-of-type { border-bottom: none; }

.result-label {
  color: var(--muted);
  font-size: 0.9rem;
}

.result-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.result-sub {
  font-size: 0.85em;
  font-weight: 600;
}

.result-sub.negative { color: var(--negative); }
.result-sub.positive { color: var(--positive); }

/* A net loss reads as one: the net-value row goes negative-red */
.result-value.negative { color: var(--negative); }

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border-radius: 50%;
  border: 1px solid var(--faint);
  color: var(--faint);
  opacity: 0.7;
  background: transparent;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  position: relative;
  vertical-align: middle;
  transition: opacity 0.15s ease;
}

.info-icon:hover,
.info-icon:focus-visible {
  opacity: 1;
  outline: none;
}

.info-icon::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 220px;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  /* display:none (not just visibility) so the hidden tooltip's max-content
     box can't widen the page — at 390px it used to cause horizontal scroll */
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.info-icon:hover::before,
.info-icon:focus-visible::before {
  display: block;
  opacity: 1;
  visibility: visible;
}

.headline-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}

.headline-stat {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}

.headline-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--faint);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.headline-value {
  display: block;
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.headline-value.negative { color: var(--negative); }
.headline-value.positive { color: var(--positive); }

/* ==========================================================================
   CTA & footer
   ========================================================================== */

.cta {
  text-align: center;
  padding: 40px 0 64px;
  border-top: 1px solid var(--line);
}

.cta h2 {
  font-size: 1.3rem;
  margin-bottom: 18px;
}

/* Coral: the solid CTA — navy text on the coral fill, never white (AA) */
.btn--solid {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 13px 26px;
  border-radius: var(--radius);
  background: var(--coral);
  color: var(--navy);
}

.btn--solid:hover { color: var(--navy); filter: brightness(1.08); }

.site-footer {
  border-top: 1px solid var(--line);
  padding: 20px 0;
  color: var(--faint);
  font-size: 0.85rem;
}

/* ==========================================================================
   Phone width
   ========================================================================== */

@media (max-width: 800px) {
  .calculator-grid { grid-template-columns: 1fr; }

  .results-panel { position: static; }

  .field-pair {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .field-pair .field { margin-bottom: 20px; }

  .header-inner {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* No mobile size override for the wordmark. At 0.8125rem it is already the
     small end of the scale on every page, and the other pages don't scale it. */

  .intro h1 { font-size: 1.7rem; }
}