/* ===================== FIRE Calculator — page styles
 * Builds on /style.css theme tokens (--bg, --accent, etc.)
 * Mobile-first; desktop adds the two-column layout.
 * ================================================== */

/* ---------- Top bar (slim variant of main page's topbar) */
.fire-topbar {
  grid-template-columns: 1fr auto !important;
}
.fire-nav {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end;
}
.fire-nav .ghost { padding: 6px 12px; font-size: 12px; }

/* ---------- Main layout container */
.fire-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

/* ---------- Hero */
.fire-hero {
  text-align: center;
  padding: 16px 8px 24px;
}
.fire-hero h1 {
  margin: 0 0 6px;
  font-size: clamp(22px, 5vw, 32px);
  letter-spacing: -0.01em;
}
.fire-hero h1::before {
  content: "🔥 ";
}
.fire-hero-sub {
  margin: 0; color: var(--fg-dim); font-size: 14px;
}

/* ---------- 2-column layout on desktop */
.fire-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px) {
  .fire-layout { grid-template-columns: 380px 1fr; align-items: start; }
  .fire-inputs { position: sticky; top: 76px; }
}

/* ---------- Cards */
.fire-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.fire-card h2 {
  margin: 0 0 12px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  font-weight: 600;
}

/* ---------- Form fields (slider + chip presets) */
.field { display: block; margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.field-head > span {
  font-size: 13px; color: var(--fg-dim);
}
.field-value {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--accent);
  font-weight: 700;
}

.field input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  height: 6px;
  background: var(--bg-row-alt);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px;       /* big enough for touch */
  background: var(--accent);
  border: 2px solid var(--bg-elev);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.field input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--accent);
  border: 2px solid var(--bg-elev);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.field input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  outline: none;
}
.field input[type="number"]:focus { border-color: var(--accent); }

/* Preset chips */
.chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.chips button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-dim);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font);
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.chips button:hover { color: var(--accent); border-color: var(--accent); }
.chips button.active {
  background: var(--accent); color: #000; border-color: var(--accent);
  font-weight: 600;
}

/* ---------- Toggle rows (options) */
.opt-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  font-size: 13px; color: var(--fg-dim);
  border-bottom: 1px solid var(--bg-row-alt);
}
.opt-row:last-child { border-bottom: none; }
.opt-row input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 40px; height: 22px;
  background: var(--bg-row-alt);
  border-radius: 11px;
  position: relative; cursor: pointer;
  transition: background .15s;
  border: 1px solid var(--border);
}
.opt-row input[type="checkbox"]::before {
  content: "";
  position: absolute; left: 2px; top: 1px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--fg-dim);
  transition: transform .15s, background .15s;
}
.opt-row input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.opt-row input[type="checkbox"]:checked::before {
  transform: translateX(18px);
  background: #000;
}

/* ---------- Results panel */
.result-hero {
  background: linear-gradient(135deg, rgba(255,122,0,0.10), rgba(255,154,60,0.04));
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 24px 20px;
  margin-bottom: 14px;
  text-align: center;
}
.result-headline {
  display: flex; justify-content: center; align-items: baseline;
  gap: 6px; flex-wrap: wrap;
}
.result-prefix, .result-suffix {
  font-size: 14px; color: var(--fg-dim);
}
.result-big {
  font-family: var(--mono);
  font-size: clamp(36px, 10vw, 56px);
  font-weight: 800;
  color: var(--accent);
  line-height: 1.1;
}
.result-summary {
  margin-top: 14px;
  font-size: 13px; color: var(--fg-dim);
  font-family: var(--mono);
  line-height: 1.7;
}
.result-summary strong { color: var(--fg); }
.result-summary .accent { color: var(--accent); font-weight: 700; }
.result-summary .neg { color: var(--danger); }

/* Special states */
.result-headline.unreachable .result-big { font-size: clamp(22px, 5vw, 30px); }

/* ---------- Chart card */
.result-chart-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px 16px;
  margin-bottom: 14px;
}
.chart-tabs {
  display: flex; gap: 4px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.chart-tab {
  background: transparent;
  border: none;
  color: var(--fg-dim);
  padding: 8px 14px;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font);
  transition: color .12s;
}
.chart-tab:hover { color: var(--accent); }
.chart-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.chart-wrap { position: relative; height: 280px; }
@media (min-width: 900px) { .chart-wrap { height: 320px; } }

/* ---------- Insights */
.result-insights {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px 18px;
  margin-bottom: 14px;
}
.result-insights h3,
.result-cta h3 {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.insights-list {
  list-style: none; margin: 0; padding: 0;
}
.insights-list li {
  padding: 8px 0;
  font-size: 13px; color: var(--fg);
  border-bottom: 1px solid var(--bg-row-alt);
  display: flex; gap: 10px; align-items: baseline;
}
.insights-list li:last-child { border-bottom: none; }
.insights-list li::before {
  content: "·"; color: var(--accent); font-weight: 700;
}

/* ---------- CTA */
.result-cta {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px 18px;
  margin-bottom: 14px;
}
.cta-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.cta-card {
  display: block;
  padding: 10px 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s, background .12s, transform .12s;
}
.cta-card:hover {
  border-color: var(--accent);
  background: var(--bg-row-hover);
  transform: translateY(-1px);
}
.cta-card .cta-ticker {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent);
  font-size: 14px;
}
.cta-card .cta-name {
  font-size: 11px;
  color: var(--fg-dim);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cta-back {
  display: inline-block;
  margin-top: 4px;
  color: var(--accent);
  font-size: 12px;
}
.cta-back:hover { color: var(--accent-soft); }

/* ---------- Disclaimer */
.result-disclaimer {
  padding: 10px 12px;
  background: var(--bg-elev-2);
  border-left: 2px solid var(--border-strong);
  border-radius: 4px;
  line-height: 1.55;
}

/* ---------- Footer */
.fire-footer {
  text-align: center;
  padding: 24px 16px 40px;
}

/* ---------- Mobile tweaks */
@media (max-width: 600px) {
  .fire-main { padding: 14px 12px 40px; }
  .fire-hero { padding: 12px 4px 20px; }
  .fire-card { padding: 12px 14px; }
  .result-hero { padding: 20px 14px; }
  .field-value { font-size: 14px; }
  .chart-wrap { height: 240px; }
}