/* ============================================================
   Is DVC Worth It, the guide + interactive break-even calculator.
   Scoped to .guide--dvc and .dvc-* . Uses the site Nightfall tokens.
   Content paragraph rules are prefixed with .guide--dvc so they beat
   the generic `.guide p` rule (0,0,1,1) in site.css regardless of order.
   ============================================================ */

.dvc-calc { --dvc-warm: oklch(64% 0.135 28); }   /* terracotta, the "paying cash" hue */

/* ---- hero: real photo + optional WebGL water shimmer -------------------- */
.guide--dvc .dvc-hero { display: block; text-align: left; padding-bottom: var(--space-md); }
.dvc-hero-media {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  background: linear-gradient(135deg, oklch(26% 0.05 278), oklch(42% 0.10 235) 52%, oklch(72% 0.12 86));
  border: 1px solid var(--hair); box-shadow: 0 18px 50px oklch(10% 0.03 278 / 0.5);
}
@media (max-width: 720px) { .dvc-hero-media { aspect-ratio: 4 / 3; } }
.dvc-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dvc-hero-media.is-noimg .dvc-hero-img { display: none; }
.dvc-hero-canvas { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.dvc-hero-canvas.is-ready { opacity: 1; }
.dvc-hero-canvas canvas { width: 100%; height: 100%; display: block; }
/* scrim off so the raw photograph shows unaltered */
.dvc-hero-scrim { display: none; }
.dvc-hero-copy { padding-top: var(--space-lg); }
.guide--dvc .dvc-hero-title { margin-top: var(--space-2xs); }
.guide--dvc .dvc-hero-standfirst { max-width: 62ch; }

/* the short answer uses the shared .guide-callout component (see site.css) */

/* ---- story lede ---------------------------------------------------------- */
.guide--dvc .dvc-story .guide-lede { font-style: italic; color: var(--ink); }

/* ===================== CALCULATOR ======================================== */
.dvc-calc {
  margin: var(--space-xl) 0 var(--space-2xl);
  background: var(--paper-2); border: 1px solid var(--hair); border-radius: 8px;
  padding: var(--space-lg); box-shadow: 0 14px 40px oklch(10% 0.03 278 / 0.45);
}
.dvc-calc-head { margin-bottom: var(--space-lg); }
.guide--dvc .dvc-sub { font-family: var(--text); font-size: 16px; line-height: 1.5; color: var(--ink-soft); margin: var(--space-2xs) 0 0; max-width: 64ch; }

.dvc-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
@media (max-width: 760px) { .dvc-grid { grid-template-columns: 1fr; gap: var(--space-lg); } }

/* ---- controls ----------------------------------------------------------- */
.dvc-controls { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }

.dvc-seg { border: 0; padding: 0; margin: 0 0 4px; min-width: 0; }
.dvc-seg legend { font-family: var(--label); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 0 0 8px; }
.dvc-seg-opts { display: flex; gap: 4px; background: var(--paper); border: 1px solid var(--hair); border-radius: 7px; padding: 4px; }
.dvc-seg-opts label { flex: 1 1 0; min-width: 0; text-align: center; cursor: pointer; white-space: nowrap; font: 500 14px/1 var(--text); color: var(--ink-soft); border-radius: 4px; padding: 9px 6px; transition: background 0.16s, color 0.16s; -webkit-tap-highlight-color: transparent; }
.dvc-seg-opts label:hover:not(:has(input:checked)) { color: var(--gold); }
.dvc-seg-opts input { position: absolute; opacity: 0; pointer-events: none; }
.dvc-seg-opts label:has(input:checked) { background: var(--gold); color: oklch(20% 0.04 278); font-weight: 600; }
.dvc-seg-opts label:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.guide--dvc .dvc-seg-help { font-family: var(--text); font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); margin: 8px 0 0; max-width: 46ch; }

.dvc-slider { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.dvc-slider-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.dvc-slider-l { font-family: var(--label); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.dvc-slider output { font-family: var(--display); font-size: 19px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }

.dvc-slider input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 0;
  background: var(--paper); border: 1px solid var(--hair); border-radius: 999px; cursor: pointer;
}
.dvc-slider input[type="range"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.dvc-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold); border: 2px solid oklch(20% 0.04 278); box-shadow: 0 2px 8px oklch(10% 0.03 278 / 0.6);
  transition: transform 0.12s;
}
.dvc-slider input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.dvc-slider input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--gold);
  border: 2px solid oklch(20% 0.04 278); box-shadow: 0 2px 8px oklch(10% 0.03 278 / 0.6);
}

/* ---- stage (chart, verdict, stats) -------------------------------------- */
.dvc-stage { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.dvc-chart-wrap { position: relative; width: 100%; background: var(--paper); border: 1px solid var(--hair); border-radius: 8px; padding: var(--space-sm); }
.dvc-chart { width: 100%; aspect-ratio: 16 / 10; max-height: 340px; display: block; }

.dvc-verdict { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: var(--space-md) var(--space-lg); border-radius: 8px; border: 1px solid var(--hair); background: var(--paper); }
.dvc-verdict-tag { font-family: var(--label); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1; padding: 6px 12px; border-radius: 999px; }
.guide--dvc .dvc-verdict-text { font-family: var(--display); font-size: clamp(19px, 2.3vw, 24px); line-height: 1.28; color: var(--ink); margin: 0; text-wrap: balance; }
.dvc-verdict-text b { font-weight: 600; }
.dvc-verdict.is-good { background: oklch(84% 0.13 86 / 0.10); border-color: oklch(84% 0.13 86 / 0.42); }
.dvc-verdict.is-good .dvc-verdict-tag { background: var(--gold); color: oklch(20% 0.04 278); }
.dvc-verdict.is-good .dvc-verdict-text b { color: var(--gold); }
.dvc-verdict.is-bad { background: oklch(64% 0.135 28 / 0.13); border-color: oklch(64% 0.135 28 / 0.45); }
.dvc-verdict.is-bad .dvc-verdict-tag { background: var(--dvc-warm); color: oklch(97% 0.02 28); }
.dvc-verdict.is-bad .dvc-verdict-text b { color: oklch(74% 0.135 28); }
.dvc-verdict.is-meh .dvc-verdict-tag { background: var(--hair); color: var(--ink); }
.dvc-verdict.is-meh .dvc-verdict-text b { color: var(--ink); }

/* 2 by 2 so each tile is wide enough that even six-figure dollar values never clip */
.dvc-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; }
.dvc-stat { background: var(--paper); padding: var(--space-md); display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.dvc-stat-l { font-family: var(--label); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.dvc-stat-v { font-family: var(--display); font-size: clamp(21px, 4vw, 27px); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dvc-stat-net { background: var(--paper-2); }
.dvc-stat-net.is-good .dvc-stat-v { color: var(--gold); }
.dvc-stat-net.is-bad .dvc-stat-v { color: oklch(74% 0.135 28); }

.guide--dvc .dvc-assume { font-family: var(--text); font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin: var(--space-lg) 0 0; padding-top: var(--space-md); border-top: 1px solid var(--hair); max-width: 82ch; }

/* ---- supporting prose: table + lists ------------------------------------ */
/* rounded container with a header band and faint column dividers; the Direct column is
   tinted as the fullest option; on small screens it scrolls sideways instead of crushing */
.dvc-table-wrap { margin: var(--space-md) 0; border: 1px solid var(--hair); border-radius: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dvc-table { width: 100%; min-width: 580px; border-collapse: collapse; font-family: var(--text); }
.dvc-table thead th { font-family: var(--label); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold); background: var(--paper-2); text-align: left; padding: 13px 14px; vertical-align: bottom; border-bottom: 1px solid var(--hair); }
.dvc-table tbody th { font-weight: 600; color: var(--ink); text-align: left; padding: 13px 14px; vertical-align: top; font-size: 14.5px; }
.dvc-table tbody td { color: var(--ink-soft); padding: 13px 14px; vertical-align: top; font-size: 14.5px; }
.dvc-table tbody tr:not(:last-child) th, .dvc-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--hair); }
.dvc-table th + th, .dvc-table td + td, .dvc-table tbody th + td { border-left: 1px solid oklch(86% 0.02 90 / 0.07); }
.dvc-table thead th:nth-child(2), .dvc-table tbody td:nth-child(2) { background: oklch(84% 0.13 86 / 0.05); color: var(--ink); }
.dvc-table tbody tr:hover td, .dvc-table tbody tr:hover th { background-color: oklch(84% 0.13 86 / 0.07); }

.dvc-list { margin: var(--space-sm) 0 var(--space-md); padding-left: 1.1em; }
.guide--dvc .dvc-list li { font-family: var(--text); font-size: 16px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 6px; }

.guide--dvc .dvc-close .guide-lede { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .dvc-hero-canvas { transition: none; }
}