/* Bond Calculator SA, premium mobile-first design system */

:root {
  --brand-50:#eff6ff;--brand-100:#dbeafe;--brand-500:#3b82f6;--brand-600:#2563eb;--brand-700:#1d4ed8;
  --slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;
  --slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;--slate-800:#1e293b;--slate-900:#0f172a;--slate-950:#020617;
  --emerald-500:#10b981;--rose-500:#f43f5e;
  --radius-md:.625rem;--radius-lg:.875rem;--radius-xl:1rem;
  --ring: 0 0 0 1px rgb(15 23 42 / .06);
  --shadow-card: 0 1px 2px rgb(15 23 42 / .04), 0 4px 12px rgb(15 23 42 / .04);
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-feature-settings: "cv02","cv03","cv04","cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---------------- Form components ---------------- */
.form-label-row {
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  font-size:.8125rem;font-weight:500;color:var(--slate-700);margin-bottom:.375rem;
}
.dark .form-label-row { color:#e2e8f0; }

.form-label-row .hint {
  display:inline-flex;align-items:center;justify-content:center;
  width:1.125rem;height:1.125rem;font-size:.6875rem;font-weight:600;
  background:var(--slate-100);color:var(--slate-500);border-radius:9999px;cursor:help;
}
.dark .form-label-row .hint { background:#1e293b; color:#94a3b8; }

.input-money {
  position:relative;display:flex;align-items:stretch;background:#fff;
  border:1px solid var(--slate-200);border-radius:var(--radius-lg);
  transition:border-color .15s, box-shadow .15s;overflow:hidden;
}
.dark .input-money { background:#0f172a;border-color:#334155; }
.input-money:focus-within { border-color:var(--brand-500);box-shadow:0 0 0 3px rgb(59 130 246 / .15); }
.dark .input-money:focus-within { box-shadow:0 0 0 3px rgb(59 130 246 / .25); }

.input-money .prefix,
.input-money .suffix {
  display:flex;align-items:center;padding:0 .875rem;
  font-size:.875rem;font-weight:500;color:var(--slate-500);
  background:var(--slate-50);user-select:none;
}
.dark .input-money .prefix, .dark .input-money .suffix { background:#1e293b; color:#94a3b8; }
.input-money .suffix { border-left:1px solid var(--slate-200); }
.input-money .prefix { border-right:1px solid var(--slate-200); }
.dark .input-money .suffix, .dark .input-money .prefix { border-color:#334155; }

.input-money input {
  flex:1;min-width:0;padding:.75rem .875rem;
  font-size:1.0625rem;font-weight:600;color:var(--slate-900);
  background:transparent;border:0;outline:none;font-variant-numeric:tabular-nums;
}
.dark .input-money input { color:#f1f5f9; }
.input-money input::placeholder { color:var(--slate-300);font-weight:500; }
.dark .input-money input::placeholder { color:#475569; }
/* hide number spin buttons */
.input-money input[type="number"]::-webkit-outer-spin-button,
.input-money input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none;margin:0; }
.input-money input[type="number"] { -moz-appearance:textfield; }

.select {
  width:100%;padding:.75rem .875rem;font-size:1rem;font-weight:500;
  background:#fff;color:var(--slate-900);
  border:1px solid var(--slate-200);border-radius:var(--radius-lg);
  outline:none;transition:border-color .15s,box-shadow .15s;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;background-size:1.125rem;
  padding-right:2.5rem;
}
.dark .select { background-color:#0f172a;color:#f1f5f9;border-color:#334155; }
.select:focus { border-color:var(--brand-500);box-shadow:0 0 0 3px rgb(59 130 246 / .15); }

input[type="number"].select { background-image:none;padding-right:.875rem;font-variant-numeric:tabular-nums; }

.preset-row { display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem; }
.preset-row button {
  padding:.375rem .625rem;font-size:.75rem;font-weight:500;
  color:var(--slate-600);background:var(--slate-100);
  border:0;border-radius:9999px;cursor:pointer;
  transition:background .15s,color .15s,box-shadow .15s;
}
.dark .preset-row button { background:#1e293b;color:#cbd5e1; }
.preset-row button:hover { background:var(--slate-200); }
.dark .preset-row button:hover { background:#334155; }
.preset-row button.active {
  background:var(--brand-600);color:#fff;
  box-shadow:0 1px 2px rgb(37 99 235 / .35);
}

/* details/summary */
.extras { border-top:1px solid var(--slate-200);padding-top:1rem;margin-top:.5rem; }
.dark .extras { border-color:#1e293b; }
.extras > summary {
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;font-weight:600;font-size:.9375rem;color:var(--slate-900);
  list-style:none;padding:.25rem 0;
}
.dark .extras > summary { color:#f1f5f9; }
.extras > summary::-webkit-details-marker { display:none; }
.extras > summary .extras-toggle::before {
  content:"";display:inline-block;width:.5rem;height:.5rem;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .2s;
}
.extras[open] > summary .extras-toggle::before { transform:rotate(-135deg); }

/* primary button */
.btn-primary-lg {
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;padding:.875rem 1rem;font-size:1rem;font-weight:600;
  color:#fff;background:linear-gradient(135deg,var(--brand-600),var(--brand-700));
  border:0;border-radius:var(--radius-lg);cursor:pointer;
  box-shadow:0 4px 14px rgb(37 99 235 / .35), inset 0 1px 0 rgb(255 255 255 / .15);
  transition:transform .1s,box-shadow .15s,filter .15s;
}
.btn-primary-lg:hover { filter:brightness(1.05); }
.btn-primary-lg:active { transform:translateY(1px); }
.btn-primary-lg:disabled { opacity:.6;cursor:not-allowed; }

.btn-ghost {
  display:inline-flex;align-items:center;gap:.375rem;
  padding:.5rem .875rem;font-size:.8125rem;font-weight:500;
  color:var(--slate-600);background:#fff;
  border:1px solid var(--slate-200);border-radius:.75rem;
  cursor:pointer;transition:background .15s,border-color .15s;
}
.dark .btn-ghost { background:#0f172a;color:#cbd5e1;border-color:#334155; }
.btn-ghost:hover { background:var(--slate-50);border-color:var(--slate-300); }
.dark .btn-ghost:hover { background:#1e293b;border-color:#475569; }

/* validation */
.error-input { border-color:var(--rose-500) !important; }
.error-message { display:block;margin-top:.375rem;font-size:.75rem;color:var(--rose-500); }
.error-message.hidden { display:none; }

.loading { opacity:.6;pointer-events:none; }

/* ---------------- Stat cards ---------------- */
.stat-card {
  background:#fff;border-radius:var(--radius-lg);padding:.875rem 1rem;
  box-shadow:var(--shadow-card);border:1px solid var(--slate-200);
}
.dark .stat-card { background:#0f172a;border-color:#1e293b; }
.stat-card__label { font-size:.6875rem;font-weight:500;color:var(--slate-500);text-transform:uppercase;letter-spacing:.04em; }
.dark .stat-card__label { color:#94a3b8; }
.stat-card__value { font-size:1.25rem;font-weight:700;color:var(--slate-900);margin-top:.125rem;font-variant-numeric:tabular-nums; }
.dark .stat-card__value { color:#f1f5f9; }
.stat-card__hint { font-size:.6875rem;color:var(--slate-500);margin-top:.125rem; }
.dark .stat-card__hint { color:#94a3b8; }

/* ---------------- Charts ---------------- */
.chart-h { height:280px;width:100%;position:relative; }
@media (min-width:640px) { .chart-h { height:340px; } }

/* ---------------- Trust cards ---------------- */
.trust-card {
  background:#fff;border-radius:var(--radius-xl);padding:1.25rem;
  box-shadow:var(--shadow-card);border:1px solid var(--slate-200);
}
.dark .trust-card { background:#0f172a;border-color:#1e293b; }
.trust-card__icon { font-size:1.5rem;margin-bottom:.5rem; }
.trust-card h3 { font-weight:600;color:var(--slate-900);font-size:.9375rem;margin-bottom:.25rem; }
.dark .trust-card h3 { color:#f1f5f9; }
.trust-card p { color:var(--slate-600);font-size:.875rem;line-height:1.5;margin:0; }
.dark .trust-card p { color:#cbd5e1; }

/* ---------------- Worked example ---------------- */
.example-stat {
  background:var(--slate-50);border:1px solid var(--slate-200);
  border-radius:var(--radius-lg);padding:.875rem .5rem;
}
.dark .example-stat { background:#0f172a;border-color:#1e293b; }
.example-stat__num { font-size:1.0625rem;font-weight:700;color:var(--brand-600);font-variant-numeric:tabular-nums; }
.dark .example-stat__num { color:#60a5fa; }
.example-stat__lbl { font-size:.6875rem;color:var(--slate-500);margin-top:.125rem;text-transform:uppercase;letter-spacing:.04em; }
.dark .example-stat__lbl { color:#94a3b8; }

/* ---------------- Prose / guide ---------------- */
.prose-custom h2 { font-size:1.625rem;font-weight:700;color:var(--slate-900);margin-bottom:1rem; }
.prose-custom h3 { font-size:1.125rem;font-weight:600;color:var(--slate-900);margin-top:1.75rem;margin-bottom:.5rem; }
.prose-custom p { color:var(--slate-700);line-height:1.7;margin-bottom:1rem; }
.prose-custom a { color:var(--brand-600);text-decoration:underline;text-underline-offset:2px; }
.prose-custom strong { color:var(--slate-900);font-weight:600; }
@media (min-width:640px) { .prose-custom h2 { font-size:1.875rem; } }
.dark .prose-custom h2,.dark .prose-custom h3,.dark .prose-custom strong { color:#f1f5f9; }
.dark .prose-custom p { color:#cbd5e1; }
.dark .prose-custom a { color:#60a5fa; }

/* ---------------- FAQ ---------------- */
.faq-item { padding:0; }
.faq-item > summary {
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.25rem;cursor:pointer;list-style:none;
  font-weight:500;color:var(--slate-900);font-size:.9375rem;
}
.dark .faq-item > summary { color:#f1f5f9; }
.faq-item > summary::-webkit-details-marker { display:none; }
.faq-item[open] > summary svg { transform:rotate(180deg); }
.faq-item__body {
  padding:0 1.25rem 1.25rem;color:var(--slate-600);font-size:.9375rem;line-height:1.65;
}
.dark .faq-item__body { color:#cbd5e1; }
.faq-item:hover > summary { background:rgb(248 250 252 / .6); }
.dark .faq-item:hover > summary { background:rgb(15 23 42 / .4); }

/* ---------------- Insights ---------------- */
.insight {
  display:flex;gap:.75rem;padding:.875rem 1rem;border-radius:var(--radius-lg);
}
.insight--positive { background:#ecfdf5;color:#065f46; }
.insight--warning  { background:#fffbeb;color:#78350f; }
.insight--info     { background:#eff6ff;color:#1e3a8a; }
.dark .insight--positive { background:rgb(6 95 70 / .15);color:#a7f3d0; }
.dark .insight--warning  { background:rgb(120 53 15 / .2);color:#fde68a; }
.dark .insight--info     { background:rgb(30 58 138 / .25);color:#bfdbfe; }
.insight__title { font-weight:600;font-size:.9375rem;margin-bottom:.125rem; }
.insight__body  { font-size:.8125rem;line-height:1.5;opacity:.9; }

/* ---------------- Tooltip (kept for legacy) ---------------- */
.hint[title] { position:relative; }

/* ---------------- Print ---------------- */
@media print {
  nav, footer, #shareBtn, #copyLinkBtn, #printBtn, #calculatorForm, .extras { display:none !important; }
  body { background:#fff; }
  .stat-card, .trust-card, .insight { box-shadow:none;border:1px solid #ccc; }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}