/* PayoutCalc — custom styles layered on top of Tailwind CDN */

:root {
  --brand: #2E3A2F;
  --brand-dark: #243025;
  --sage: #6B7F5B;
  --sand: #D9C9B2;
  --accent: #C96F4F;
  --ink: #2E3A2F;
  --paper: #F8F6EE;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---------- Range sliders ---------- */
input[type="range"].sc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(to right, var(--brand) 0%, var(--brand) var(--fill, 0%), #E4DCCB var(--fill, 0%), #E4DCCB 100%);
  outline: none;
  cursor: pointer;
}
.dark input[type="range"].sc-range {
  background: linear-gradient(to right, #A9B898 0%, #A9B898 var(--fill, 0%), #3A413A var(--fill, 0%), #3A413A 100%);
}
input[type="range"].sc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--brand);
  box-shadow: 0 1px 3px rgba(46, 58, 47, .25);
  transition: transform .15s ease;
}
input[type="range"].sc-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--brand);
  box-shadow: 0 1px 3px rgba(46, 58, 47, .25);
}
input[type="range"].sc-range:focus-visible::-webkit-slider-thumb { transform: scale(1.2); box-shadow: 0 0 0 4px rgba(107, 127, 91, .35); }
input[type="range"].sc-range:active::-webkit-slider-thumb { transform: scale(1.15); }

/* Hide number spinners for a cleaner look */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ---------- Breakdown bar ---------- */
.sc-bar { display: flex; width: 100%; height: 14px; border-radius: 9999px; overflow: hidden; background: #E4DCCB; }
.dark .sc-bar { background: #3A413A; }
.sc-bar > span { display: block; height: 100%; transition: width .35s ease; min-width: 0; }

.sc-progress { height: 10px; border-radius: 9999px; background: #E4DCCB; overflow: hidden; }
.dark .sc-progress { background: #3A413A; }
.sc-progress > span { display: block; height: 100%; border-radius: 9999px; transition: width .35s ease, background-color .35s ease; }

/* ---------- FAQ accordion ---------- */
.faq details { border-bottom: 1px solid #E4DCCB; }
.dark .faq details { border-color: #3A413A; }
.faq summary { list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .faq-icon { transition: transform .25s ease; }
.faq details[open] summary .faq-icon { transform: rotate(45deg); }
.faq details[open] .faq-body { animation: sc-fade .25s ease; }

@keyframes sc-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Article typography ---------- */
.prose-sc h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-top: 2.5rem; margin-bottom: 1rem; color: #2E3A2F; }
.prose-sc h3 { font-size: 1.125rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: .5rem; color: #2E3A2F; }
.prose-sc p { margin-bottom: 1rem; line-height: 1.75; }
.prose-sc ul, .prose-sc ol { margin: 0 0 1rem 1.25rem; line-height: 1.75; }
.prose-sc ul { list-style: disc; }
.prose-sc ol { list-style: decimal; }
.prose-sc li { margin-bottom: .5rem; }
.prose-sc a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.prose-sc code, .formula {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875rem;
}
.formula {
  display: block;
  padding: .75rem 1rem;
  margin: .5rem 0 1rem;
  border-left: 4px solid var(--accent);
  border-radius: .5rem;
  background: #F0ECE0;
  color: #2E3A2F;
  overflow-x: auto;
  white-space: nowrap;
}
.dark .prose-sc h2 { color: #F8F6EE; }
.dark .prose-sc h3 { color: #E4DCCB; }
.dark .prose-sc a { color: #A9B898; }
.dark .formula { background: rgba(107, 127, 91, .15); color: #D9C9B2; }

/* Tables */
.sc-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.sc-table th, .sc-table td { padding: .625rem .75rem; text-align: left; border-bottom: 1px solid #E4DCCB; vertical-align: top; }
.sc-table thead th { background: #F0ECE0; font-weight: 600; color: #3A413A; white-space: nowrap; }
.sc-table tbody tr:hover { background: #F8F6EE; }
.dark .sc-table th, .dark .sc-table td { border-color: #3A413A; }
.dark .sc-table thead th { background: #2E3A2F; color: #D9C9B2; }
.dark .sc-table tbody tr:hover { background: rgba(43, 48, 43, .6); }

/* ---------- Toast ---------- */
#sc-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 150%);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  z-index: 60;
  pointer-events: none;
}
#sc-toast.show { transform: translate(-50%, 0); opacity: 1; }

/* Preset button active state */
.preset-btn.is-active { background: var(--brand); color: #F8F6EE; border-color: var(--brand); }
.dark .preset-btn.is-active { background: var(--sage); border-color: var(--sage); color: #fff; }

/* Value pulse on update */
.sc-pulse { animation: sc-pulse .4s ease; }
@keyframes sc-pulse { 0% { opacity: .55; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Print / PDF export ---------- */
.print-only { display: none; }
@media print {
  @page { margin: 14mm; }
  html, body { background: #fff !important; color: #000 !important; }
  .no-print, header, footer, nav, article, #sc-toast, .preset-wrap { display: none !important; }
  .print-only { display: block !important; }
  .print-card { box-shadow: none !important; border: 1px solid #D9C9B2 !important; break-inside: avoid; position: static !important; }
  .dark * { color: #000 !important; background: transparent !important; }
  .sc-bar > span, .sc-progress > span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  main { padding: 0 !important; }
  .print-grid { display: block !important; }
  .print-grid > * { margin-bottom: 12px; }
  input { border: none !important; }
  input[type="range"] { display: none !important; }
}

/* ---------- Earthy palette: dark-mode refinements ---------- */
.dark input[type="range"].sc-range::-webkit-slider-thumb { border-color: var(--sage); background: #F8F6EE; }
.dark input[type="range"].sc-range::-moz-range-thumb { border-color: var(--sage); background: #F8F6EE; }
.prose-sc a:hover { color: var(--accent); }
::selection { background: rgba(201, 111, 79, .25); }

/* Dark mode: lift forest-green surfaces so they keep contrast on the charcoal background */
.dark .bg-indigo-600 { background-color: #6B7F5B; }
.dark .hover\:bg-indigo-700:hover { background-color: #5A6C4C; }
.dark #netProfitCard { background-image: linear-gradient(to bottom right, #4A5A3E, #2E3A2F); box-shadow: inset 0 0 0 1px rgba(169, 184, 152, .15); }
.dark .focus-visible\:ring-indigo-500:focus-visible, .dark .focus\:ring-indigo-500:focus { --tw-ring-color: #A9B898; }

/* Language switcher */
.lang-switch { font-size: .75rem; font-weight: 700; letter-spacing: .04em; }

/* Price scenario table */
.sc-scn td, .sc-scn th { padding: .55rem .75rem; text-align: right; white-space: nowrap; }
.sc-scn td:first-child, .sc-scn th:first-child { text-align: left; }
.sc-scn tbody tr { border-top: 1px solid #F0ECE0; }
.dark .sc-scn tbody tr { border-color: #2B302B; }
.sc-scn tr.is-current { background: #F0ECE0; font-weight: 600; }
.dark .sc-scn tr.is-current { background: rgba(107, 127, 91, .18); }
.sc-scn tr.is-be td { color: #8F4830; }
.dark .sc-scn tr.is-be td { color: #DE9A7C; }
.sc-scn .neg { color: #B42318; }
.dark .sc-scn .neg { color: #F4A08A; }
.sc-scn .bar { display: inline-block; height: 6px; border-radius: 9999px; background: #6B7F5B; vertical-align: middle; margin-right: .4rem; }