/* ══════════════════════════════════════════════════════════════
   UPNIXTOOLS — CALCULATOR MIGRATION STYLESHEET  (migrate-calc.css)
   Sirf build/tools/ ki calculator pages ke liye.
   site.css ko bilkul edit NAHI kiya gaya.

   RULES (task se):
   - Saari nayi classes YAHI file mein hain, `.calcx-` prefix ke saath.
   - Koi inline <style> nahi, koi Google Fonts link nahi, kahin Syne nahi.
   - Dark theme: koi hard-coded dark text nahi — sirf theme tokens
     (--ink, --ink-soft, --muted, --accent, --danger, --surface*, --line*).
   - Har calculator page is file ko header ke baad link karta hai:
       <link rel="stylesheet" href="/assets/css/migrate-calc.css?v=1">

   JS-MANDATED EXCEPTIONS (in-page <script> inhe naam se use karta hai,
   rename KARNA MANA hai — sirf yahan restyle kiya gaya hai):
     #results.visible      — JS classList 'visible' toggle karta hai
     .input.error           — JS input par class 'error' add/remove karta hai
     #ac-toast / .show      — toast ka id + show state
     .ac-birthday / .ac-birthday-today — JS className set karta hai
     .ci-dot / .mc-dot      — legend dot classes JS markup strings mein
     .pc-tab.active         — paycheck setMode() 'active' toggle karta hai
     .pc-dot                — paycheck donut() legend HTML mein likhta hai
     .pc-conv .gold          — paycheck calc() <span class="gold"> likhta hai
     .sc-mode.active        — sleep setMode() 'active' toggle karta hai
     .sc-opt / .sel / .sc-badge / .cyc / .tm / .dur — sleep calc() markup
                             likhta hai, querySelectorAll + classList use karta hai
     .sc-seg                — sleep drawTimeline() markup likhta hai
     .sc-results-head .big .gold — sleep calc() <span class="gold"> likhta hai
   Baqi .pc-* / .sc-* classes source-faithful rakhi gayi hain (site.css mein
   in naamon se kuch nahi hai, is liye collision ka khatra nahi).
   ══════════════════════════════════════════════════════════════ */

/* ── 1. BADGE PILL (tool-head ke andar, live text verbatim) ── */
.calcx-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 18px;
}

/* ── 2. BUTTON ACTIONS ROW ── */
.calcx-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.calcx-actions .btn-primary {
  flex: 1;
  min-width: 180px;
}

/* ── 3. FIELD ERROR TEXT (live: .ac-field-err — JS sirf textContent set karta hai,
        is liye id same rehti hai, class rename safe hai) ── */
.calcx-err {
  font-size: .78rem;
  color: var(--danger);
  margin-top: 6px;
  min-height: 18px;
  line-height: 1.5;
}

/* ── 4. INPUT ERROR STATE — class naam JS-mandated hai ('error') ── */
.input.error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent);
}

/* ── 5. RESULTS CONTAINER — JS #results par class 'visible' toggle karta hai ── */
#results {
  display: none;
  margin-top: 22px;
}
#results.visible {
  display: block;
  animation: calcx-fade .3s ease;
}
@keyframes calcx-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── 6. BIRTHDAY BANNER — class naam JS-mandated (className = 'ac-birthday...') ── */
.ac-birthday {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .92rem;
  color: var(--ink);
  margin-top: 14px;
}
.calcx-birthday-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.ac-birthday strong {
  color: var(--accent);
}
.ac-birthday-today {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-dim);
}

/* ── 7. TOAST — id JS-mandated hai ── */
#ac-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 10px 20px;
  font-size: .85rem;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
  white-space: nowrap;
}
#ac-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 8. SEO FEATURE CARDS GRID ── */
.calcx-seo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin: 32px 0;
}
.calcx-seo-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
  transition: transform var(--tr), border-color var(--tr);
}
.calcx-seo-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.calcx-seo-card h3 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 8px;
}
.calcx-seo-card p {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* ── 9. FAQ CUSTOM LIST (live markup: div > strong + p, verbatim rakha) ── */
.calcx-faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0;
}
.calcx-faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 20px;
}
.calcx-faq-item strong {
  display: block;
  font-size: .9rem;
  color: var(--ink);
  margin-bottom: 6px;
}
.calcx-faq-item p {
  font-size: .85rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.7;
}

/* ── 10. TWO-COLUMN KEY/VALUE ROWS (ci/mc/pc breakdowns; markup-only change,
        JS sirf ids use karta hai) ── */
.calcx-kv2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  margin-bottom: 8px;
}
@media (max-width: 600px) {
  .calcx-kv2 { grid-template-columns: 1fr; }
}

/* ── 11. SHARED STAT TILES — "gold" emphasis ko theme accent par map kiya ── */
.stat .v.gold {
  color: var(--accent);
}

/* ── 12. CHARTS + LEGENDS ── */
.calcx-chart {
  margin: 22px 0 6px;
}
.calcx-chart svg {
  width: 100%;
  height: auto;
  display: block;
}
.calcx-legend {
  display: flex;
  gap: 22px;
  justify-content: center;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 10px;
  flex-wrap: wrap;
}
.calcx-legend .li {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* JS-MANDATED EXCEPTIONS: legend dot classes JS strings mein likhta hai
   (ci-dot static markup; mc-dot/pc-dot dynamic) — rename mana hai */
.calcx-legend .li .ci-dot,
.calcx-legend .li .mc-dot,
.calcx-legend .li .pc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.calcx-legend .v {
  margin-left: auto;
  font-weight: 700;
  color: var(--ink);
  padding-left: 18px;
}
/* donut variant: svg + legend side by side */
.calcx-donut {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  margin: 22px 0 6px;
  flex-wrap: wrap;
}
.calcx-donut .calcx-legend {
  display: grid;
  gap: 8px;
  margin-top: 0;
  justify-content: start;
}

/* ── 13. DISCLAIMER NOTE ── */
.calcx-note {
  font-size: 13px;
  color: var(--faint);
  line-height: 1.7;
  margin-top: 18px;
}
.calcx-note strong {
  color: var(--ink-soft);
}

/* ── 14. CALLOUT BOX (Rule of 72) ── */
.calcx-box {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 18px 22px;
  margin: 18px 0;
}
.calcx-box h3 {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--accent);
}
.calcx-box p {
  margin: 0;
  font-size: 15px;
}

/* ── 15. RELATED CARDS WITH DESCRIPTION ── */
.calcx-rel {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.calcx-rel .rel-t {
  font-weight: 600;
}
.calcx-rel .rel-desc {
  font-weight: 400;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}

/* ── 16. PAYCHECK MODE TABS ──
   Naam source-faithful (.pc-*); 'active' class setMode() classList se toggle karta hai */
.pc-tabs {
  display: flex;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 22px;
}
.pc-tab {
  flex: 1;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  padding: 11px 6px;
  transition: background .15s, color .15s;
}
.pc-tab:hover {
  color: var(--ink-soft);
}
.pc-tab.active {
  background: #f5c518;
  color: #11151c;
}

/* ── 17. PAYCHECK CONVERSION BANNER ──
   JS-MANDATED EXCEPTION: calc() innerHTML mein <span class="gold"> likhta hai */
.pc-conv {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 20px;
  text-align: center;
  line-height: 1.6;
}
.pc-conv .gold {
  color: #f5c518;
}

/* ── 17b. PAYCHECK DONUT + LEGEND + BREAKDOWN ──
   JS-MANDATED EXCEPTION: donut() legend HTML mein <span class="pc-dot"> likhta hai */
.pc-chart-wrap {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  margin: 22px 0 6px;
  flex-wrap: wrap;
}
.pc-legend {
  display: grid;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-soft);
  min-width: 200px;
}
.pc-legend .li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pc-legend .v {
  margin-left: auto;
  font-weight: 700;
  color: var(--ink);
  padding-left: 18px;
}
.pc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.pc-break {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  margin-bottom: 8px;
}
.pc-brow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 14.5px;
}
.pc-brow:last-child {
  border-bottom: none;
}
.pc-brow .k {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
}
.pc-brow .v {
  font-weight: 700;
  color: var(--ink);
}
.pc-note {
  font-size: 13px;
  color: var(--faint);
  line-height: 1.7;
  margin-top: 18px;
}
.stat .v.gold {
  color: #f5c518;
}
@media (max-width: 600px) {
  .pc-break { grid-template-columns: 1fr; }
}

/* ── 18. MORTGAGE PMI CHECKBOX ROW ── */
.calcx-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1.5;
}
.calcx-check input {
  margin-top: 3px;
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex: none;
}
.calcx-check .hint {
  margin: 0;
}

/* ── 19. SLEEP MODE CARDS ──
   Naam source-faithful (.sc-*); 'active' class setMode() classList se toggle karta hai */
.sc-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 22px;
}
.sc-mode {
  border: 1px solid var(--line);
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.sc-mode .ico {
  font-size: 24px;
  display: block;
  margin-bottom: 6px;
}
.sc-mode .t {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft);
  line-height: 1.4;
}
.sc-mode.active {
  border-color: #f5c518;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px #f5c518 inset;
}

/* ── 20. SLEEP "USE CURRENT TIME" BUTTON ── */
.sc-now {
  width: 100%;
  background: var(--surface-2);
  margin-top: 10px;
  border: 1px dashed var(--line);
  color: var(--ink-soft);
  border-radius: 10px;
  padding: 11px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.sc-now:hover {
  border-color: #f5c518;
  color: #f5c518;
}

/* sleep range + time inputs (source mein class="sc-input" hai) */
.sc-input {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-size: 16px;
  font-family: var(--font-body);
  padding: 12px 14px;
  outline: none;
  box-sizing: border-box;
}
.sc-input:focus {
  border-color: #f5c518;
}
input[type="range"].sc-input {
  accent-color: #f5c518;
  padding: 12px 8px;
  border: none;
  background: transparent;
}
input[type="time"].input,
input[type="time"].sc-input {
  color-scheme: dark;
}
.field label output {
  margin-left: auto;
  font-weight: 700;
  color: var(--ink);
}

/* ── 21. SLEEP OPTION CARDS ──
   JS-MANDATED EXCEPTIONS: calc() '.sc-opt' markup likhta hai,
   querySelectorAll('.sc-opt') se parhta hai, 'sel' classList se toggle hota hai */
.sc-optgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
.sc-opt {
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
  position: relative;
}
.sc-opt:hover {
  border-color: var(--accent-2);
  transform: translateY(-2px);
}
.sc-opt.sel {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.sc-opt .cyc {
  font-size: 11.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.sc-opt .tm {
  font-size: 21px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.3px;
}
.sc-opt .dur {
  font-size: 12.5px;
  color: var(--faint);
  margin-top: 6px;
}
.sc-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--bg);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .sc-optgrid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 22. SLEEP RESULTS HEAD ──
   JS-MANDATED EXCEPTION: calc() innerHTML mein <span class="gold"> likhta hai */
.sc-results-head {
  text-align: center;
  padding: 6px 0 18px;
}
.sc-results-head .lbl {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}
.sc-results-head .big {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.5px;
  line-height: 1.3;
}
.sc-results-head .big .gold {
  color: #f5c518;
}

/* ── 23. SLEEP TIMELINE ──
   JS-MANDATED EXCEPTIONS: drawTimeline() '.sc-seg' markup likhta hai */
.sc-timeline {
  margin-top: 20px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 20px;
}
.sc-timeline h3 {
  font-size: 15px;
  margin: 0 0 4px;
  color: var(--ink);
}
.sc-timeline .tl-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 16px;
}
.sc-bar {
  position: relative;
  height: 64px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
}
.sc-seg {
  flex: 1;
  border-right: 1px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--bg);
  min-width: 0;
}
.sc-seg:last-child {
  border-right: none;
}
.sc-seg span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
}
.sc-tl-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 10px;
}
.sc-tl-labels b {
  color: var(--ink);
}
.sc-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--faint);
  line-height: 1.7;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 16px;
}

/* ── 24. SLEEP TIPS GRID ── */
.sc-tips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px;
}
.sc-tip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
}
.sc-tip .ti {
  font-size: 22px;
  margin-bottom: 8px;
}
.sc-tip h3 {
  font-size: 15.5px;
  margin: 0 0 8px;
  color: var(--ink);
}
.sc-tip p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.7;
}
@media (max-width: 900px) {
  .sc-tips { grid-template-columns: 1fr; }
}

/* ── 25. STAT TILES: chhoti screens par 2 columns (source behavior) ── */
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}