:root{
  --bg:#0b1020; --card:#0f1724; --muted:#9aa3b7; --text:#eef2ff;
  --pri:#7c5cff; --pri-2:#4fd1c5; --glass:rgba(255,255,255,0.03);
  --radius:14px; --shadow: 0 10px 30px rgba(0,0,0,.35);
  --container:1100px;
}
html {
  font-size: 16px; /* ensure consistent base font size */
  scroll-behavior: smooth;
}

*{ box-sizing:border-box; }
body{ margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--text); background:
  radial-gradient(1200px 600px at 70% -10%, rgba(124,92,255,.12), transparent 60%), var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.container{ width: min(var(--container), 92vw); margin: 0 auto; }

/* Header */
.site-header{ position:sticky; top:0; z-index:60; backdrop-filter: blur(8px); background: linear-gradient(180deg, rgba(10,14,25,.7), rgba(10,14,25,.35)); border-bottom:1px solid rgba(255,255,255,.04); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.brand{ display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; }
.logo{ height:40px; width:auto; border-radius:10px; }
.brand-title{ font-weight:700; letter-spacing:.3px; }

/* Nav */
.main-nav{ display:flex; gap:12px; align-items:center; }
.nav-link{ color:var(--muted); padding:8px 12px; border-radius:10px; text-decoration:none; font-size:14px; }
.nav-link:hover{ color:var(--text); background:var(--glass); }

/* Buttons */
.btn{ border:0; padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600; }
.btn.primary{ background: linear-gradient(135deg,var(--pri),var(--pri-2)); color:white; box-shadow: var(--shadow); }
.btn.outline{ background: transparent; border:1px solid rgba(255,255,255,.06); color:var(--text); }

/* Hero */
.hero{ display:grid; grid-template-columns: 1.1fr .9fr; gap:20px; align-items:center; padding:36px 0; }
.hero .card{ padding:0; border-radius:14px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow); }
.lede{ color:var(--muted); margin-top:8px; }
.features{ list-style:none; margin-top:14px; color:var(--muted); }

/* Card / sections */
.section{ padding:28px 0; }
.card{ background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); color:var(--text); }
.pad{ padding:18px; }

/* Calculator layout */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:12px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
.grid-auto{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-top:14px; }
.seg{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.seg-btn{ background:transparent; border:1px solid rgba(255,255,255,.06); color:var(--text); padding:8px 12px; border-radius:10px; cursor:pointer; }
.seg-btn.active{ background:linear-gradient(135deg,var(--pri),var(--pri-2)); border-color:transparent; color:#fff; }

/* Forms */
label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
input, select, textarea{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); color:var(--text); }
input::placeholder{ color:rgba(255,255,255,.35); }

/* Results & KPIs */
.kpi{ background: rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.04); padding:12px; border-radius:10px; text-align:center; }
.kpi-title{ font-size:12px; color:var(--muted); }
.kpi-value{ font-weight:700; margin-top:6px; font-size:16px; }

/* Footer */
.site-footer{ padding:28px 0; border-top:1px solid rgba(255,255,255,.06); color:var(--muted); margin-top:24px; }
.footer-inner{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; align-items:start; }
.footer-col a{ color:var(--muted); text-decoration:none; }
.logo-sm{ height:28px; vertical-align:middle; margin-right:8px; }

/* small helpers */
.muted{ color:var(--muted); }
.small{ font-size:13px; color:var(--muted); }

/* Responsive */
@media (max-width:980px){ .hero{ grid-template-columns:1fr; } .grid-3{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; } .footer-inner{ grid-template-columns:1fr; } .main-nav{ gap:8px; } }
@media(max-width:768px){
  .hero{ grid-template-columns:1fr; text-align:center; }
  .hero-right{ order:-1; } /* move image above text */
}

@media (max-width:600px) {
  body { font-size: 16px; }
  .grid { grid-template-columns: 1fr; }
}

.table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  margin-top: 8px;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

.table th,
.table td {
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  text-align: left;
  color: var(--muted);
  font-size: 14px;
}

/* Tooltip container */
.tooltip {
  position: relative;
  cursor: pointer;
  display: inline-block;
  margin-left: 6px;
  font-size: 14px;
  font-weight: bold;
  color: var(--tooltip-icon-color, #555); /* default icon color */
}

/* Tooltip text (hidden by default) */
.tooltip .tooltip-text {
  visibility: hidden;
  width: 220px;
  background: var(--tooltip-bg, #333);
  color: var(--tooltip-text, #fff);
  text-align: left;
  border-radius: 8px;
  padding: 6px 10px;
  position: absolute;
  z-index: 10;
  bottom: 125%; /* above the icon */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Tooltip arrow */
.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%; /* bottom of tooltip */
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: var(--tooltip-bg, #333) transparent transparent transparent;
}

/* Show on hover */
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}


.btn.ghost:active {
  transform: scale(0.96);
}

/* Fix ghost buttons */
#resetBtn,
#printBtn,
#saveBtn,
#exportBtn {
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.25s ease-in-out;
}

#resetBtn:hover,
#printBtn:hover,
#saveBtn:hover,
#exportBtn:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--pri), var(--pri-2));
  border-color: transparent;
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

#resetBtn:active,
#printBtn:active,
#saveBtn:active,
#exportBtn:active {
  transform: scale(0.96);
}

/* FORCE ghost button styling */
.seg.actions .btn.ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}

.seg.actions .btn.ghost:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--pri), var(--pri-2));
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.seg.actions .btn.ghost:active {
  transform: scale(0.96);
}

.seg.actions button {
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 0.6em 1.2em;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}

.seg.actions button:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--pri), var(--pri-2));
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.seg.actions button:active {
  transform: scale(0.96);
}

footer a {
  display: inline-block;   /* stay side by side */
  margin: 0 8px;           /* small horizontal spacing */
  padding: 4px 0;          /* little vertical breathing room */
}

/* ==============================
   NOSCRIPT WARNING STYLES
   ============================== */
.noscript-warning {
  background: #fff3cd;       /* soft yellow */
  border: 1px solid #ffeeba;
  color: #856404;
  padding: 20px;
  margin: 20px auto;
  border-radius: 8px;
  max-width: 700px;
  text-align: left;
  font-family: Arial, sans-serif;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}


/* Light mode overrides */
[data-theme="light"] {
  --bg: #ffffff;
  --card: #f9f9f9;
  --muted: #444444;   /* darker gray for secondary text */
  --text: #111111;    /* black text */
  --pri: #4a67ff;
  --pri-2: #0099cc;
  --glass: rgba(0,0,0,0.03);
}

article, 
article p, 
article h1, 
article h2, 
article h3, 
article h4, 
article h5, 
article h6, 
.article-content {
  color: var(--text);
  
}

@media print {
  body * {
    visibility: hidden;
  }
  #calculator, #calculator * {
    visibility: visible;
  }
  #calculator {
    position: absolute;
    left: 0;
    top: 0;
  }
}

.hidden { display: none; }

@media print {
  body * { visibility: hidden; }
  .calc-card, .calc-card * { visibility: visible; }
  .calc-card { position: relative; }
}

input.error {
  border: 2px solid red;
  background-color: #ffe6e6;
}


#history {
  overflow-x: auto;
}

/* ==========================
   Typography
   ========================== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }


/* ===== Table of Contents (TOC) ===== */
.toc {
  background: var(--card);
  padding: 0.8em 1em;
  margin: 1.5em 0;
  border: 1px solid var(--muted);
  border-radius: 6px;
  max-width: 320px;
}

/* Heading inside TOC */
.toc h2 {
  color: #1a4e8a;                /* deep blue for light mode */
  font-size: 1.1em;
  margin-bottom: 0.5em;
}

/* Links list */
.toc ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.toc li {
  margin: 0.3em 0;
}

.toc a {
  color: #1a4e8a;                /* blue links for light mode */
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.toc a:hover {
  text-decoration: underline;
  color: #0d3a6b;                /* darker blue on hover */
}

/* ===== Dark Mode Overrides ===== */
[data-theme="dark"] .toc h2,
[data-theme="dark"] .toc a {
  color: #cdd7e5;                /* soft gray-blue for dark mode */
}

[data-theme="dark"] .toc a:hover {
  color: #ffffff;                /* white on hover for clarity */
}

/* Divider */
.divider {
  border-top: 1px solid var(--muted);
  margin: 2em 0;
}


/* ===== Divider ===== */
.divider {
  border-top: 1px solid #ddd;   /* thin gray line */
  margin: 2em 0;                /* spacing before & after */
}

/* Mobile Menu */
/* Hamburger button */
.hamburger {
  display: none;
  font-size: 1.8rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
}

/* Mobile nav */
/* ==============================
   Mobile Navigation
   ============================== */
@media (max-width: 768px) {
  .hamburger {
    display: block;
    margin-left: auto;
    z-index: 2001; /* above menu */
  }

  .main-nav {
    display: none; /* hidden by default */
    flex-direction: column;
    background: var(--card);
    position: fixed;
    top: 70px;          /* below header */
    right: 15px;
    width: 240px;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 2000;      /* above content */
  }

  .main-nav.active {
    display: flex;
  }

  /* ✅ Correct link colors */
  .main-nav .nav-link {
    display: block;
    padding: 12px;
    margin: 6px 0;
    color: var(--muted);        /* muted gray text */
    background: transparent;
    border-radius: 6px;
    font-size: 15px;
    text-decoration: none;
  }

  .main-nav .nav-link:hover {
    background: var(--glass);
    color: var(--text);
  }
}

/* Content links — clean, no underline, hover/tap works on all devices */
a {
  color: var(--pri);                 /* main link color */
  text-decoration: none !important;  /* force remove underline */
  transition: color 0.25s ease, background 0.25s ease;
}

a:hover,
a:focus,
a:active {
  color: var(--pri-2);               /* hover/tap color change */
  text-decoration: none !important;  /* prevent underline on hover/tap */
}

/* Exclude nav and footer links (keep their own style) */
.nav-link,
.footer-col a {
  color: var(--muted);
  text-decoration: none !important;
}


/* === FINAL FIX — Highlighted content links, no underlines anywhere === */

/* Applies to all content links except nav/footer/toc */
body :where(main, article, section, .card, .section, p) a:not(.nav-link):not(footer a):not(.footer-col a):not(.toc a) {
  color: #a78bfa !important;                /* bright purple, always visible */
  font-weight: 600 !important;
  text-decoration: none !important;
  -webkit-text-decoration: none !important; /* remove underline on Safari */
  text-decoration-skip-ink: none !important;
  -webkit-text-decoration-skip: none !important;
  border: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: color 0.25s ease, transform 0.2s ease;
}

/* Hover/tap color change (no underline) */
body :where(main, article, section, .card, .section, p) a:hover:not(.nav-link):not(footer a):not(.footer-col a):not(.toc a),
body :where(main, article, section, .card, .section, p) a:focus:not(.nav-link):not(footer a):not(.footer-col a):not(.toc a),
body :where(main, article, section, .card, .section, p) a:active:not(.nav-link):not(footer a):not(.footer-col a):not(.toc a) {
  color: #4fd1c5 !important;                /* cyan hover/tap color */
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  transform: scale(1.02);
}

/* Keep nav/footer links muted and unchanged */
.nav-link,
.footer-col a,
footer a {
  color: var(--muted) !important;
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  transition: none !important;
}

/* Kill underline everywhere else (especially Safari mobile) */
a, a:visited, a:active {
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  text-decoration-skip-ink: none !important;
  -webkit-text-decoration-skip: none !important;
  -webkit-tap-highlight-color: transparent !important;
}


/* === Responsive Guide Image Fix === */
.guide-figure {
  text-align: center;
  margin: 1.5em auto;
  max-width: 100%;
}

.guide-image {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
  object-fit: cover;
}

.guide-caption {
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
  text-align: center;
}

/* == Overflow ==*/ 
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, .guide-image {
  max-width: 100%;
  height: auto;
  display: block;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
  max-width: 100%;
}