/* ============================================================
   EDGE AMC — DPS vs SIP Calculator
   Self-contained stylesheet. No header/footer styles, no
   framework. Everything is namespaced under .edge-calc so it
   cannot leak into the rest of edgeamc.com.

   BRAND TOKENS are from the live edgeamc.com stylesheet
   (/contents/website/css/style.css):
     #043852 dark teal (buttons/headers) · #f47957 coral (hover/CTA)
     #132c33 headings · #606060 body · #808080 muted · #F2F5F6 bg
     Playfair Display (headings) + Inter (body); square corners.

   If your page already loads the shared calculator CSS, you can
   delete the :root block below — the rest inherits those tokens.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Inter:wght@400;500;600;700&family=Noto+Serif+Bengali:wght@600;700&family=Noto+Sans+Bengali:wght@400;500;600;700&display=swap');

.edge-calc {
  /* ---- brand ---- */
  --color-primary: #043852;
  --color-primary-dark: #032a3e;
  --color-primary-light: #1E6588;
  --color-accent: #f47957;
  --color-accent-dark: #e0603c;
  --color-bg: #F2F5F6;
  --color-surface: #FFFFFF;
  --color-border: #E1E7EF;
  --color-text: #606060;
  --color-heading: #132c33;
  --color-text-muted: #808080;

  /* ---- chart series ----
     Snapped from the brand hues into the legal categorical band
     (OKLCH L 0.43–0.77, C >= 0.10) and validated: adjacent CVD
     ΔE 19.1 protan / 33.4 tritan, normal-vision ΔE 32.6, both
     >= 3:1 on white and on #F2F5F6. Do not hand-edit these two
     without re-running the palette validator. */
  --series-sip: #00629a;   /* fixed income fund SIP — brand teal family */
  --series-dps: #e26846;   /* bank / NBFI DPS — brand coral family */
  --series-sip-wash: rgba(0, 98, 154, .10);

  --grid: #E6EBEF;
  --font-heading: 'Playfair Display', 'Noto Serif Bengali', Georgia, serif;
  --font-body: 'Inter', 'Noto Sans Bengali', 'Segoe UI', sans-serif;
  --shadow-sm: 0 1px 3px rgba(4, 56, 82, .08);

  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-surface);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 8px;
}

.edge-calc *, .edge-calc *::before, .edge-calc *::after { box-sizing: border-box; }
.edge-calc h1, .edge-calc h2, .edge-calc h3 {
  font-family: var(--font-heading); color: var(--color-heading);
  font-weight: 700; margin: 0 0 .5em; line-height: 1.25;
}
.edge-calc p { margin: 0 0 1em; }
.edge-calc ul { margin: 0; padding: 0; list-style: none; }
.edge-calc button { font-family: inherit; }

/* Bengali needs a little more leading */
html[lang="bn"] .edge-calc { line-height: 1.75; }
html[lang="bn"] .edge-calc h1, html[lang="bn"] .edge-calc h2 { line-height: 1.45; }

.edge-calc .container { max-width: 1180px; margin: 0 auto; padding: 28px 20px 0; }

/* ================= Heading row + language toggle ================= */
.edge-calc .calc-hero-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 20px; flex-wrap: wrap; margin-bottom: .35em;
}
.edge-calc .calc-hero-head h1 { margin: 0; flex: 1 1 auto; font-size: clamp(26px, 4.2vw, 40px); }
.edge-calc .calc-hero-head .lang-toggle { flex: 0 0 auto; margin-left: auto; }

.edge-calc .lang-toggle {
  display: inline-flex; border: 1px solid var(--color-primary); overflow: hidden;
  background: var(--color-surface);
}
.edge-calc .lang-toggle button {
  border: none; background: transparent; padding: 7px 16px; font-size: 13px;
  font-weight: 600; color: var(--color-primary); cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.edge-calc .lang-toggle button:hover:not(.active) { background: rgba(4, 56, 82, .07); }
.edge-calc .lang-toggle button.active { background: var(--color-primary); color: #fff; }

.edge-calc .lede { font-size: 16.5px; color: var(--color-text-muted); max-width: 780px; margin-bottom: 26px; }

/* ================= Cards & layout ================= */
.edge-calc .card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm); padding: 26px; margin-bottom: 22px;
}
.edge-calc .card h2 { font-size: 19px; margin-bottom: 18px; }

.edge-calc .calc-shell {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 22px; align-items: start;
}
.edge-calc .calc-shell > * { min-width: 0; }

/* ================= Form controls ================= */
.edge-calc .field { margin-bottom: 20px; }
.edge-calc .field:last-child { margin-bottom: 0; }
.edge-calc .field-label-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px;
}
.edge-calc .field label { font-size: 14px; font-weight: 600; color: var(--color-heading); }
.edge-calc .hint { font-size: 12px; color: var(--color-text-muted); text-align: right; }

.edge-calc .input-box {
  display: flex; align-items: center; border: 1.5px solid var(--color-border);
  background: #fff; transition: border-color .15s;
}
.edge-calc .input-box:focus-within { border-color: var(--color-primary); }
.edge-calc .input-box.is-suffix { flex-direction: row-reverse; }
.edge-calc .input-box .unit {
  padding: 11px 12px; font-weight: 600; font-size: 14px; color: var(--color-text-muted);
  background: var(--color-bg); border-right: 1.5px solid var(--color-border); white-space: nowrap;
}
.edge-calc .input-box.is-suffix .unit { border-right: none; border-left: 1.5px solid var(--color-border); }
.edge-calc .input-box input {
  border: none; outline: none; padding: 11px 13px; width: 100%;
  font-family: var(--font-body); font-size: 15.5px; font-weight: 600;
  color: var(--color-heading); background: transparent;
}
.edge-calc input[type="range"] {
  width: 100%; margin-top: 9px; height: 4px; accent-color: var(--color-primary);
}
.edge-calc .range-scale {
  display: flex; justify-content: space-between; font-size: 11.5px;
  color: var(--color-text-muted); margin-top: 3px;
}
.edge-calc .split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.edge-calc .split-2 > * { min-width: 0; }

/* Assumptions disclosure */
.edge-calc .assumptions { margin-top: 22px; border-top: 1px solid var(--color-border); padding-top: 16px; }
.edge-calc .assumptions summary {
  cursor: pointer; font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  color: var(--color-heading); list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 12px; transition: color .3s ease;
}
.edge-calc .assumptions summary:hover { color: var(--color-accent); }
.edge-calc .assumptions summary::-webkit-details-marker { display: none; }
.edge-calc .assumptions summary::after { content: "+"; font-size: 20px; color: var(--color-accent); }
.edge-calc .assumptions[open] summary::after { content: "\2212"; }
.edge-calc .assumptions[open] summary { margin-bottom: 16px; }
.edge-calc .assumptions-note {
  font-size: 12.5px; color: var(--color-text-muted); background: var(--color-bg);
  padding: 10px 12px; border-left: 3px solid var(--color-accent); margin-bottom: 18px;
}
.edge-calc .check-row {
  display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px;
  color: var(--color-text); margin-top: 4px; cursor: pointer;
}
.edge-calc .check-row input { margin-top: 3px; accent-color: var(--color-primary); flex-shrink: 0; }

.edge-calc .btn-ghost {
  background: none; border: 1px solid var(--color-border); color: var(--color-primary);
  font-size: 13px; font-weight: 600; padding: 8px 16px; cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
}
.edge-calc .btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }
.edge-calc .reset-btn { margin-top: 16px; }

/* ================= Result panel ================= */
.edge-calc .result-card { position: sticky; top: 20px; }
.edge-calc .result-headline {
  text-align: center; padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px dashed var(--color-border);
}
.edge-calc .result-headline .label { font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
/* Hero figure uses the sans, not Playfair: a display serif on a large
   data figure reads as decoration and its digits sit loose. */
.edge-calc .result-headline .value {
  font-family: var(--font-body); font-size: clamp(30px, 5.2vw, 42px); font-weight: 700;
  color: var(--color-primary); margin: 4px 0; letter-spacing: -.5px;
}
.edge-calc .result-headline .words { font-size: 12.5px; color: var(--color-text-muted); }

.edge-calc .result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.edge-calc .result-stat { background: var(--color-bg); padding: 13px 15px; min-width: 0; }
.edge-calc .stat-label {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  font-weight: 600; color: var(--color-text-muted);
}
/* Line-key: mirrors the line mark, carries identity beside the text
   so the text itself never wears the series color. */
.edge-calc .key { width: 14px; height: 3px; border-radius: 2px; flex-shrink: 0; display: inline-block; }
.edge-calc .key-sip { background: var(--series-sip); }
.edge-calc .key-dps { background: var(--series-dps); }
.edge-calc .stat-value {
  font-family: var(--font-body); font-size: 19px; font-weight: 700;
  color: var(--color-heading); margin-top: 3px;
}
.edge-calc .stat-sub { font-size: 11.5px; color: var(--color-text-muted); margin-top: 2px; }

.edge-calc .mini-facts { margin: 0; font-size: 13px; }
.edge-calc .mini-facts > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--color-border);
}
.edge-calc .mini-facts > div:last-child { border-bottom: none; }
.edge-calc .mini-facts dt { color: var(--color-text-muted); }
.edge-calc .mini-facts dd { margin: 0; font-weight: 600; color: var(--color-heading); }

/* ================= Chart ================= */
.edge-calc .chart-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap;
}
.edge-calc .chart-head h2 { margin-bottom: 4px; }
.edge-calc .chart-sub { font-size: 13.5px; color: var(--color-text-muted); margin: 0; }

.edge-calc .legend { display: flex; gap: 20px; flex-wrap: wrap; margin: 18px 0 6px; }
.edge-calc .legend .item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text); }

.edge-calc .chart-wrap { position: relative; width: 100%; }
.edge-calc #chart { width: 100%; display: block; touch-action: pan-y; }
.edge-calc #chart text { font-family: var(--font-body); }

.edge-calc .tooltip {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .12s ease;
  background: #fff; border: 1px solid var(--color-border); box-shadow: 0 6px 20px rgba(4,56,82,.14);
  padding: 10px 12px; font-size: 12.5px; min-width: 178px; z-index: 5;
}
.edge-calc .tooltip.on { opacity: 1; }
.edge-calc .tooltip .tt-head {
  font-weight: 600; color: var(--color-text-muted); font-size: 11.5px;
  padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--color-border);
}
.edge-calc .tooltip .tt-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.edge-calc .tooltip .tt-row:last-child { margin-bottom: 0; }
/* Values lead, labels follow */
.edge-calc .tooltip .tt-val { font-weight: 700; color: var(--color-heading); font-variant-numeric: tabular-nums; }
.edge-calc .tooltip .tt-name { color: var(--color-text-muted); font-size: 11.5px; }
.edge-calc .tooltip .tt-gap {
  border-top: 1px solid var(--color-border); margin-top: 7px; padding-top: 7px;
  font-size: 11.5px; color: var(--color-text-muted);
}
.edge-calc .tooltip .tt-gap strong { color: var(--color-primary); }

/* Table view — the non-visual twin of the chart */
.edge-calc .table-view { margin-top: 18px; overflow-x: auto; }
.edge-calc .table-view table { width: 100%; border-collapse: collapse; font-size: 13px; }
.edge-calc .table-view caption {
  text-align: left; font-size: 12.5px; color: var(--color-text-muted); padding-bottom: 10px;
}
.edge-calc .table-view th, .edge-calc .table-view td {
  text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.edge-calc .table-view th:first-child, .edge-calc .table-view td:first-child { text-align: left; }
.edge-calc .table-view thead th {
  font-weight: 600; color: var(--color-text-muted); font-size: 12px;
  border-bottom: 1.5px solid var(--color-border);
}

/* ================= Commentary ================= */
.edge-calc .commentary p { font-size: 14.5px; margin-bottom: 12px; }
.edge-calc .commentary p:last-child { margin-bottom: 0; }
.edge-calc .commentary strong { color: var(--color-heading); font-weight: 600; }
.edge-calc .commentary .note {
  background: var(--color-bg); border-left: 3px solid var(--color-primary-light);
  padding: 12px 14px; font-size: 13.5px; color: var(--color-text);
}
.edge-calc .commentary .note.warn { border-left-color: var(--color-accent); }

/* ================= CTA ================= */
.edge-calc .btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
  padding: 10px 35px; border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.edge-calc .btn-lg { padding: 13px 40px; font-size: 16px; }
.edge-calc .btn-accent { background: var(--color-accent); color: #fff; }
.edge-calc .btn-accent:hover { background: #fff; color: var(--color-primary); }
.edge-calc .btn-on-dark { background: transparent; border-color: #fff; color: #fff; }
.edge-calc .btn-on-dark:hover { background: #fff; color: var(--color-primary); }

.edge-calc .cta-band {
  background: var(--color-primary); border-top: 4px solid var(--color-accent);
  color: #fff; padding: 38px 30px; text-align: center; margin-bottom: 22px;
}
.edge-calc .cta-band h2 { color: #fff; font-size: clamp(21px, 3vw, 26px); }
.edge-calc .cta-band p { color: rgba(255,255,255,.85); max-width: 600px; margin: 0 auto; }
.edge-calc .cta-band .btn-row { display: flex; gap: 12px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }

.edge-calc .disclaimer {
  font-size: 11.5px; color: var(--color-text-muted); padding-bottom: 26px; margin: 0;
}

/* ================= Responsive ================= */
@media (max-width: 980px) {
  .edge-calc .calc-shell { grid-template-columns: 1fr; }
  .edge-calc .result-card { position: static; }
}
@media (max-width: 620px) {
  .edge-calc .card { padding: 18px; }
  .edge-calc .split-2 { grid-template-columns: 1fr; gap: 0; }
  .edge-calc .split-2 > .field { margin-bottom: 20px; }
  .edge-calc .result-grid { grid-template-columns: 1fr; }
  .edge-calc .cta-band { padding: 26px 18px; }
  .edge-calc .container { padding: 22px 16px 0; }
  .edge-calc .hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .edge-calc * { transition: none !important; }
}