/* ============================================================
   Finance Atlas — Site-wide Design System (v20260824)
   ------------------------------------------------------------
   Loaded AFTER styles.css and dark-theme.css. Provides:

   1. Design tokens — CSS variables for widths, spacing, radius,
      shadows, colours. Single source of truth.
   2. Container widths — .fa-container, .fa-container-calc,
      .fa-container-read, .fa-container-wide. Lets each content
      type use the right max-width without forcing every page
      into the same column.
   3. Result explanation — .fa-result-explanation. Constrains
      long calculator-generated verdict/explanation sentences
      to a comfortable reading width and prevents horizontal
      overflow on mobile. Responsive — no <br> tags needed.
   4. Article prose — .fa-prose. Constrains body copy to a
      sensible measure (line length) for readability without
      changing other layout.
   5. Sticky calculator result — .fa-sticky-result. The reusable
      mobile bottom-sheet component (paired with
      js/fa-sticky-result.js). Position fixed, safe-area aware,
      hides automatically when the primary result is in view.
   6. Calculator input — .fa-input. Visual consistency for
      number/currency/percent inputs and selects across all
      calculators.
   7. Calculator card — .fa-card, .fa-result-card,
      .fa-result-primary, .fa-result-secondary. Visual hierarchy
      for results.
   8. Disclaimer — .fa-disclaimer, .fa-disclaimer-inline.
      Consistent typography and placement.
   9. Related calculators — .fa-related-list, .fa-related-link.
   10. Breadcrumbs — .fa-breadcrumb.
   11. Tables — .fa-table.
   12. Embed widget — already in styles.css; we extend with
      .fa-embed-attribution for the embedded "Powered by" line.

   Design principles: professional, trustworthy, modern,
   financial, clean, fast, accessible, mobile-friendly. No
   excessive gradients/animations/glassmorphism. The dark
   theme overrides below keep these components consistent
   when dark-theme.css is active.
   ============================================================ */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* Maximum content widths */
  --fa-width-page:        72rem;   /* 1152px — main site container */
  --fa-width-calc:        72rem;   /* calculator interface */
  --fa-width-read:        46rem;   /* 736px — comfortable reading */
  --fa-width-result:     42rem;   /* 672px — result panel max */
  --fa-width-wide:        88rem;   /* 1408px — comparison tables */
  --fa-width-narrow:      38rem;   /* 608px — short forms */

  /* Spacing scale (matches Tailwind's rem-based 4px grid) */
  --fa-space-1:  0.25rem;
  --fa-space-2:  0.5rem;
  --fa-space-3:  0.75rem;
  --fa-space-4:  1rem;
  --fa-space-5:  1.25rem;
  --fa-space-6:  1.5rem;
  --fa-space-7:  1.75rem;
  --fa-space-8:  2rem;
  --fa-space-10: 2.5rem;
  --fa-space-12: 3rem;
  --fa-space-16: 4rem;
  --fa-space-20: 5rem;

  /* Section spacing — vertical rhythm between major page blocks */
  --fa-section-gap:        var(--fa-space-10);   /* between sections */
  --fa-section-gap-lg:    var(--fa-space-16);   /* hero → body */
  --fa-pre-footer-gap:    var(--fa-space-12);   /* last content → footer */

  /* Card padding */
  --fa-card-pad:          var(--fa-space-5);    /* p-5 */
  --fa-card-pad-sm:       var(--fa-space-4);   /* p-4 */
  --fa-card-pad-lg:       var(--fa-space-7);   /* p-7 */

  /* Radii */
  --fa-radius-sm:         0.375rem;   /* 6px — small chips */
  --fa-radius:            0.5rem;      /* 8px — buttons, inputs */
  --fa-radius-md:         0.75rem;     /* 12px — cards */
  --fa-radius-lg:         1rem;        /* 16px — panels */
  --fa-radius-xl:         1.25rem;     /* 20px — hero cards */
  --fa-radius-pill:       9999px;

  /* Shadows — subtle, professional */
  --fa-shadow-sm:         0 1px 2px rgba(15, 23, 42, 0.05);
  --fa-shadow:            0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --fa-shadow-md:         0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --fa-shadow-lg:         0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --fa-shadow-sticky:     0 -4px 20px -4px rgba(15, 23, 42, 0.18), 0 -2px 6px -2px rgba(15, 23, 42, 0.08);

  /* ---------- Colour tokens ----------
     IMPORTANT: this stylesheet loads AFTER dark-theme.css, so any
     token name defined in BOTH :root blocks resolves to the value
     declared HERE. The site is dark-only (dark-theme.css is on
     every page), so:
       - shared palette names (--fa-text-primary/-secondary/-inverse,
         --fa-accent, --fa-border-strong/-subtle) are intentionally
         NOT redefined here — dark-theme.css :root owns them;
       - the fa-system-only names below are pre-tuned for the dark
         background (#0A0B0F page / #14161C surface). */

  /* Borders — dark surface borders */
  --fa-border:            #2A2E38;     /* aligns with dark --fa-border-default */

  /* Backgrounds — dark surfaces */
  --fa-bg-page:           #0A0B0F;     /* dark --fa-bg-base */
  --fa-bg-card:           #14161C;     /* dark --fa-bg-surface */
  --fa-bg-muted:          #1C1F27;     /* dark --fa-bg-elevated */
  --fa-bg-overlay:        rgba(10, 11, 15, 0.85);

  /* Text — labels/meta tones for dark background.
     Nothing darker than #94A3B8 (slate-400, ~7.6:1 on #0A0B0F). */
  --fa-text-muted:        #94A3B8;     /* slate-400 */
  --fa-text-faint:        #94a3b8;     /* slate-400 */

  /* Brand accent — dark-theme amber family */
  --fa-accent-hover:      #D97706;     /* deep amber */
  --fa-accent-soft:       rgba(245, 158, 11, 0.15);
  --fa-accent-contrast:   #0A0B0F;     /* dark text on amber (≈9.8:1) */

  /* Result panel (navy card) — unchanged; readable white-on-navy */
  --fa-result-bg:         #1E2229;     /* navy-900 */
  --fa-result-text:       #ffffff;
  --fa-result-muted:      rgba(228, 230, 233, 0.7);  /* navy-100/70 */
  --fa-result-faint:      rgba(228, 230, 233, 0.5);  /* navy-100/50 */
  --fa-result-accent:     #f59e0b;     /* amber-400 */

  /* Disclaimer (amber) — dark-theme amber treatment */
  --fa-disclaimer-bg:     rgba(245, 158, 11, 0.08);
  --fa-disclaimer-border: rgba(245, 158, 11, 0.3);
  --fa-disclaimer-text:   #FCD34D;     /* amber-300 — light on dark */

  /* Typography */
  --fa-font-sans:         'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --fa-font-mono:         ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  --fa-leading-tight:     1.25;
  --fa-leading-snug:      1.375;
  --fa-leading-normal:    1.5;
  --fa-leading-relaxed:   1.625;

  /* Reading measure — max chars per line for comfortable reading */
  --fa-measure:           65ch;       /* ~65 characters */
  --fa-measure-wide:      72ch;

  /* Sticky result mobile bottom sheet */
  --fa-sticky-height:     68px;
  --fa-sticky-z:          45;         /* below cookie-consent (z-50) */
}

/* ---------- 2. Container Widths ----------
   Usage: add the class alongside max-w-6xl mx-auto px-4.
   They override max-width via specificity. */

.fa-container {
  max-width: var(--fa-width-page);
  margin-inline: auto;
  padding-inline: var(--fa-space-4);
}
.fa-container-calc {
  max-width: var(--fa-width-calc);
  margin-inline: auto;
  padding-inline: var(--fa-space-4);
}
.fa-container-read {
  max-width: var(--fa-width-read);
  margin-inline: auto;
  padding-inline: var(--fa-space-4);
}
.fa-container-result {
  max-width: var(--fa-width-result);
  margin-inline: auto;
  padding-inline: var(--fa-space-4);
}
.fa-container-wide {
  max-width: var(--fa-width-wide);
  margin-inline: auto;
  padding-inline: var(--fa-space-4);
}
.fa-container-narrow {
  max-width: var(--fa-width-narrow);
  margin-inline: auto;
  padding-inline: var(--fa-space-4);
}

/* ---------- 3. Result Explanation ----------
   The reusable class for calculator-generated verdict/explanation
   text. Constrains width to a comfortable reading measure and
   prevents horizontal overflow. The text wraps naturally. */

.fa-result-explanation {
  max-width: var(--fa-measure) !important;
  line-height: var(--fa-leading-relaxed) !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;  /* override dark-theme nowrap */
  hyphens: auto;
  -webkit-hyphens: auto;
  /* Slight inline-block so the box hugs the wrapped text rather
     than stretching to its parent's full width. */
  display: block;
}
/* When the explanation sits inside the dark navy result card,
   let it use the wider measure (the card is already narrow). */
.bg-navy-900 .fa-result-explanation,
[data-fa-result] .fa-result-explanation,
[data-fa-sticky-result] .fa-result-explanation {
  max-width: var(--fa-measure-wide) !important;
}
/* On small screens, never overflow horizontally */
@media (max-width: 640px) {
  .fa-result-explanation {
    max-width: 100% !important;
    /* But still keep sensible line length via internal padding */
    padding-inline: 0;
  }
}

/* ---------- 3a. Override dark-theme nowrap on result sentences ----------
   dark-theme.css aggressively sets `white-space: nowrap` on
   dynamic result sentences like #outVerdict and #outSummary.
   That prevents the verdict text from wrapping, which is the
   exact "stretches wider than reading width" bug the user
   reported. Our .fa-result-explanation class MUST win, so we
   use a higher-specificity selector that targets the same IDs
   and overrides. */
p.fa-result-explanation#outVerdict,
p.fa-result-explanation#outSummary,
p.fa-result-explanation {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  flex-shrink: 1 !important;
  font-size: 0.875rem;  /* allow theme to override if it wants */
}

/* ---------- 4. Article Prose ----------
   Constrains body paragraphs in <article> elements to a
   comfortable reading measure, even when the article column
   is wider than that. Headings and lists remain at the
   article's full width for visual hierarchy. */

.fa-prose,
.fa-prose p,
.fa-prose ul,
.fa-prose ol,
.fa-prose blockquote {
  max-width: var(--fa-measure-wide);
}
.fa-prose p + p {
  margin-top: var(--fa-space-3);
}
.fa-prose h2,
.fa-prose h3,
.fa-prose h4 {
  max-width: none;  /* let headings span the article column */
}
.fa-prose ul,
.fa-prose ol {
  padding-left: var(--fa-space-7);
}
.fa-prose li + li {
  margin-top: var(--fa-space-2);
}

/* ---------- 5. Sticky Calculator Result (mobile bottom sheet) ----------
   Reusable, opt-in via data attributes on the calculator's
   primary result container:
     data-fa-sticky-result          (presence enables the bar)
     data-fa-sticky-label           (e.g. "Monthly Instalment")
     data-fa-sticky-value-id        (element id whose textContent mirrors)
     data-fa-sticky-secondary-label (optional, e.g. "Total Cost")
     data-fa-sticky-secondary-id    (optional, second value)
   The JS auto-injects the bar and uses IntersectionObserver
   to hide it whenever the primary result is already in view. */

.fa-sticky-result {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--fa-sticky-z);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fa-space-3);
  min-height: var(--fa-sticky-height);
  padding: var(--fa-space-3) max(env(safe-area-inset-left, 0), var(--fa-space-4))
                       max(env(safe-area-inset-bottom, 0), var(--fa-space-3))
                       max(env(safe-area-inset-right, 0), var(--fa-space-4));
  background: var(--fa-result-bg);
  color: var(--fa-result-text);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--fa-shadow-sticky);
  font-family: var(--fa-font-sans);
  /* Hidden by default — JS adds .fa-sticky-result--visible when
     the primary result scrolls out of view. */
  transform: translateY(120%);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.fa-sticky-result--visible {
  transform: translateY(0);
}
.fa-sticky-result__primary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.fa-sticky-result__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fa-result-faint);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fa-sticky-result__value {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fa-accent);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fa-sticky-result__secondary {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
  max-width: 45%;
}
.fa-sticky-result__secondary-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--fa-result-faint);
  line-height: 1.2;
  white-space: nowrap;
}
.fa-sticky-result__secondary-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--fa-result-text);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.fa-sticky-result__attribution {
  position: absolute;
  top: -22px;
  right: var(--fa-space-4);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fa-result-faint);
  text-decoration: none;
  background: var(--fa-result-bg);
  padding: 2px 8px;
  border-radius: var(--fa-radius-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.fa-sticky-result__attribution:hover {
  color: var(--fa-result-accent);
}
/* Desktop: render as a discreet floating pill at the bottom-left
   corner of the viewport, always visible while the calculator is
   in view. It mirrors the live primary result in real time. Hides
   only when the footer is reached (so it never covers the footer). */
@media (min-width: 1024px) {
  .fa-sticky-result {
    inset: auto auto 1.25rem 1.25rem;   /* bottom-left, 20px offset */
    min-width: 280px;
    max-width: 340px;
    min-height: 0;
    padding: 0.625rem 0.875rem 0.75rem;
    border-radius: var(--fa-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
      0 12px 32px -6px rgba(15, 23, 42, 0.32),
      0 4px 12px -2px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
  }
  /* On desktop the attribution chip sits inline at the top-right
     of the pill rather than floating above it. */
  .fa-sticky-result__attribution {
    position: absolute;
    top: 4px;
    right: 6px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    font-size: 8px;
    color: var(--fa-result-faint);
  }
  .fa-sticky-result__attribution:hover {
    color: var(--fa-result-accent);
    background: transparent;
  }
  /* Slightly smaller value text on desktop pill */
  .fa-sticky-result__value {
    font-size: 1.25rem;
  }
  .fa-sticky-result__secondary-value {
    font-size: 0.8125rem;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fa-sticky-result {
    transition: none;
  }
}
/* Make sure body has bottom padding when the sticky bar is
   visible, so it never covers footer content. The JS adds
   .fa-sticky-active to <body> when the bar is shown. */
body.fa-sticky-active {
  padding-bottom: calc(var(--fa-sticky-height) + env(safe-area-inset-bottom, 0));
}
@media (min-width: 1024px) {
  body.fa-sticky-active { padding-bottom: 0; }
}

/* ---------- 6. Calculator Inputs ----------
   Visual consistency for number/currency/percent inputs and
   selects. The existing pages already use the navy + amber
   focus ring; .fa-input codifies it as one class so future
   calculators (and edits) get the right styling for free. */

.fa-input {
  width: 100%;
  font-family: var(--fa-font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fa-text-primary);
  background: var(--fa-bg-card);   /* dark surface — dark-theme.css also restyles native inputs */
  border: 1px solid var(--fa-border-strong);
  border-radius: var(--fa-radius);
  padding: 0.625rem 0.75rem;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.fa-input:hover {
  border-color: var(--fa-text-muted);
}
.fa-input:focus,
.fa-input:focus-visible {
  border-color: var(--fa-accent);
  box-shadow: 0 0 0 3px var(--fa-accent-soft);
  outline: none;
}
.fa-input::placeholder {
  color: var(--fa-text-faint);
  font-weight: 400;
}
select.fa-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 14px;
  padding-right: 2.25rem;
  cursor: pointer;
}
/* Number input — strip native spinner for consistent look */
.fa-input[type="number"]::-webkit-inner-spin-button,
.fa-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.fa-input[type="number"] {
  -moz-appearance: textfield;
}
/* Mobile: prevent iOS zoom-in by ensuring ≥16px font */
@media (max-width: 640px) {
  .fa-input { font-size: 16px; }
}

/* Slider (range) — match existing amber thumb */
input[type="range"].fa-input[type="range"],
input[type="range"].fa-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--fa-radius-pill);
  background: linear-gradient(to right, var(--fa-bg-elevated, #1C1F27), var(--fa-bg-hover, #232733));
  outline: none;
  padding: 0;
  border: 0;
}
input[type="range"].fa-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fa-accent);
  border: 3px solid #ffffff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.35);
  cursor: pointer;
}
input[type="range"].fa-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fa-accent);
  border: 3px solid #ffffff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.35);
  cursor: pointer;
}

/* Field group — label + input + hint */
.fa-field {
  display: flex;
  flex-direction: column;
  gap: var(--fa-space-2);
}
.fa-field > label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fa-text-primary);
}
.fa-field-hint {
  font-size: 0.75rem;
  color: var(--fa-text-muted);
  line-height: 1.4;
}

/* ---------- 7. Result Cards & Hierarchy ---------- */

.fa-card {
  background: var(--fa-bg-card);
  border: 1px solid var(--fa-border);
  border-radius: var(--fa-radius-md);
  padding: var(--fa-card-pad);
  box-shadow: var(--fa-shadow);
}
.fa-card-lg {
  padding: var(--fa-card-pad-lg);
  border-radius: var(--fa-radius-lg);
}
.fa-result-card {
  background: var(--fa-result-bg);
  color: var(--fa-result-text);
  border-radius: var(--fa-radius-lg);
  padding: var(--fa-card-pad-lg);
  box-shadow: var(--fa-shadow-lg);
}
.fa-result-primary {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--fa-result-text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.fa-result-secondary {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--fa-result-accent);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.fa-result-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fa-result-muted);
  line-height: 1.2;
}
.fa-result-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  margin-block: var(--fa-space-5);
}

/* ---------- 8. Disclaimers ---------- */

.fa-disclaimer {
  background: var(--fa-disclaimer-bg);
  border: 1px solid var(--fa-disclaimer-border);
  border-radius: var(--fa-radius-md);
  padding: var(--fa-space-3) var(--fa-space-4);
  color: var(--fa-disclaimer-text);
  font-size: 0.8125rem;
  line-height: var(--fa-leading-relaxed);
  text-align: center;
}
.fa-disclaimer-inline {
  background: var(--fa-disclaimer-bg);
  border-left: 4px solid #fbbf24;  /* amber-400 */
  border-radius: 0 var(--fa-radius) var(--fa-radius) 0;
  padding: var(--fa-space-4) var(--fa-space-5);
  color: var(--fa-disclaimer-text);
  font-size: 0.875rem;
  line-height: var(--fa-leading-relaxed);
}
.fa-disclaimer strong {
  font-weight: 700;
}

/* ---------- 9. Related Calculators ---------- */

.fa-related-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fa-space-2);
  margin-top: var(--fa-space-3);
}
@media (min-width: 640px) {
  .fa-related-list {
    grid-template-columns: 1fr 1fr;
  }
}
.fa-related-list li {
  list-style: none;
}
.fa-related-link {
  display: block;
  padding: var(--fa-space-3) var(--fa-space-4);
  background: var(--fa-bg-card);
  border: 1px solid var(--fa-border);
  border-radius: var(--fa-radius);
  color: var(--fa-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.fa-related-link:hover {
  border-color: var(--fa-accent);
  color: var(--fa-accent);
  transform: translateY(-1px);
}
.fa-related-link strong {
  color: var(--fa-text-primary);
  font-weight: 700;
  display: block;
}

/* ---------- 10. Breadcrumbs ---------- */

.fa-breadcrumb {
  font-size: 0.75rem;
  color: var(--fa-text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding-top: var(--fa-space-4);
}
.fa-breadcrumb a {
  color: var(--fa-text-muted);
  text-decoration: none;
  transition: color 150ms ease;
}
.fa-breadcrumb a:hover {
  color: var(--fa-text-primary);
}
.fa-breadcrumb [aria-current="page"] {
  color: var(--fa-text-secondary);
  font-weight: 500;
}

/* ---------- 11. Tables ---------- */

.fa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.fa-table thead {
  position: sticky;
  top: 0;
  background: var(--fa-result-bg);
  color: var(--fa-result-text);
}
.fa-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.fa-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--fa-border-subtle);
  color: var(--fa-text-secondary);
}
.fa-table tbody tr:nth-child(even) {
  background: var(--fa-bg-muted);
}
.fa-table tbody tr:hover {
  background: var(--fa-accent-soft);
}
.fa-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--fa-radius-md);
  border: 1px solid var(--fa-border);
}
.fa-table-wrap .fa-table {
  margin: 0;
}

/* ---------- 12. Buttons (CTA) ---------- */

.fa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--fa-font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.625rem 1rem;
  border-radius: var(--fa-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
  text-decoration: none;
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
}
.fa-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.fa-btn-primary {
  background: var(--fa-accent);
  color: var(--fa-accent-contrast);
  box-shadow: var(--fa-shadow-md);
}
.fa-btn-primary:hover:not(:disabled) {
  background: var(--fa-accent-hover);
}
.fa-btn-primary:focus-visible {
  outline: 2px solid var(--fa-accent);
  outline-offset: 2px;
}
.fa-btn-ghost {
  background: transparent;
  color: var(--fa-text-secondary);
  border-color: var(--fa-border);
}
.fa-btn-ghost:hover {
  background: var(--fa-bg-muted);
  color: var(--fa-text-primary);
}

/* ---------- 13. Embed Attribution (inside iframes) ----------
   A small visible "Powered by Finance Atlas" link rendered
   inside the calculator when ?embed=1 is in the URL, so
   embedded iframes carry clear, non-deceptive attribution. */

.fa-embed-attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px 12px;
  font-family: var(--fa-font-sans);
  font-size: 11px;
  color: var(--fa-text-muted);
  background: transparent;
}
.fa-embed-attribution a {
  color: var(--fa-accent);
  font-weight: 600;
  text-decoration: none;
}
.fa-embed-attribution a:hover {
  text-decoration: underline;
}

/* ---------- 14. Section spacing normalisation ----------
   Prevents the "different empty space before footer" problem.
   Add .fa-section to top-level <section> blocks for consistent
   rhythm. */

.fa-section {
  padding-top: var(--fa-section-gap);
  padding-bottom: var(--fa-section-gap);
}
.fa-section-tight {
  padding-top: var(--fa-space-8);
  padding-bottom: var(--fa-space-8);
}
/* The section immediately preceding the footer should breathe
   a bit more, but never balloon into huge whitespace. */
main > section:last-of-type {
  padding-bottom: var(--fa-pre-footer-gap);
}

/* ---------- 15. Embed Widget (existing — refined) ----------
   The .fa-embed-widget-container etc. classes are already
   defined in styles.css. We add a few refinements here for
   clearer copy feedback and a polished look. */

.fa-embed-card {
  border-radius: var(--fa-radius-md);
  box-shadow: var(--fa-shadow);
}
.fa-embed-toggle {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fa-text-primary);
  padding: 0.875rem 1.125rem;
}
.fa-embed-lead {
  font-size: 0.8125rem;
  line-height: var(--fa-leading-relaxed);
  color: var(--fa-text-secondary);
}
.fa-embed-copy {
  background: var(--fa-accent);
  color: var(--fa-accent-contrast);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: var(--fa-radius);
  border: 0;
  cursor: pointer;
  transition: background-color 150ms ease, transform 100ms ease;
}
.fa-embed-copy:hover {
  background: var(--fa-accent-hover);
}
.fa-embed-copy:active {
  transform: scale(0.98);
}
.fa-embed-copy--done {
  background: #15803d;  /* green-700 */
  color: #ffffff;
}
.fa-embed-status {
  font-size: 0.75rem;
  color: var(--fa-text-muted);
  min-height: 1rem;
}
.fa-embed-status--ok {
  color: #15803d;
  font-weight: 600;
}

/* ---------- 16. Dark theme overrides ----------
   Make sure the new component classes look right when
   dark-theme.css is active. These are scoped narrowly so
   they don't bleed into the light theme. */

html.fa-dark-theme .fa-card,
html.fa-dark-theme .fa-related-link {
  background: #1C1F27;
  border-color: #2A2E38;
  color: #9CA3AF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
html.fa-dark-theme .fa-related-link strong {
  color: #F0F1F4;
}
html.fa-dark-theme .fa-related-link:hover {
  border-color: var(--fa-accent);
  color: var(--fa-accent-bright, #FBBF24);
}
html.fa-dark-theme .fa-input {
  background: #0F1116;
  border-color: #2A2E38;
  color: #F0F1F4;
}
html.fa-dark-theme .fa-input:focus,
html.fa-dark-theme .fa-input:focus-visible {
  border-color: var(--fa-accent, #F59E0B);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}
html.fa-dark-theme select.fa-input {
  background-color: #0F1116;
}
html.fa-dark-theme .fa-disclaimer {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
  color: #FCD34D;
}
html.fa-dark-theme .fa-disclaimer-inline {
  background: rgba(245, 158, 11, 0.08);
  border-left-color: var(--fa-accent, #F59E0B);
  color: #FBBF24;
}
html.fa-dark-theme .fa-table td {
  color: #9CA3AF;
  border-bottom-color: #2A2E38;
}
html.fa-dark-theme .fa-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}
html.fa-dark-theme .fa-table-wrap {
  border-color: #2A2E38;
}
html.fa-dark-theme .fa-breadcrumb,
html.fa-dark-theme .fa-breadcrumb a {
  color: #6B7280;
}
html.fa-dark-theme .fa-breadcrumb a:hover {
  color: #F0F1F4;
}
html.fa-dark-theme .fa-breadcrumb [aria-current="page"] {
  color: #9CA3AF;
}
html.fa-dark-theme .fa-embed-card {
  background: #1C1F27;
  border-color: #2A2E38;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
html.fa-dark-theme .fa-embed-toggle {
  color: #F0F1F4;
}
html.fa-dark-theme .fa-embed-toggle:hover {
  background: rgba(255, 255, 255, 0.03);
}
html.fa-dark-theme .fa-embed-lead {
  color: #9CA3AF;
}
html.fa-dark-theme .fa-embed-fineprint {
  color: #6B7280;
}

/* ---------- 17. Print-friendly ---------- */
@media print {
  .fa-sticky-result,
  .fa-embed-widget-container,
  .fa-regions-section,
  #faMobileMenu,
  #mobileBottomSheet {
    display: none !important;
  }
  .fa-card,
  .fa-result-card {
    box-shadow: none !important;
  }
}

/* ---------- 18. Embed mode refinement ----------
   When ?embed=1 is active, the embed attribution is rendered
   so the embedded iframe carries visible backlink. The JS
   injects it; the style here just makes it tidy. */

html.fa-embed-mode .fa-embed-attribution {
  display: flex;
}
html.fa-embed-mode main {
  padding-bottom: 0 !important;
}

/* ---------- 19. Chart canvas & grid overflow guard ----------
   Chart.js in responsive mode sets an inline pixel width on
   the <canvas>. When the chart's parent grid item has no
   explicit width constraint (CSS grid items default to
   min-width: auto, which prevents them from shrinking below
   their content size), this can cause a feedback loop that
   pushes the whole calculator wider than the viewport at
   mobile widths. Two fixes:

   1. Grid items: min-width: 0 — allow them to shrink.
   2. Chart canvases: max-width: 100% — the canvas never
      exceeds its parent's width, regardless of what
      inline width Chart.js writes.

   Together these end the horizontal overflow at 375–414px
   viewport widths on calculator pages with charts. */

.grid > * {
  min-width: 0;
}

canvas {
  max-width: 100% !important;
}

/* Chart.js parent containers (the site uses <div class="relative h-[220px]">)
   need an explicit height AND a max-width so the canvas knows its
   bounds during the initial paint, before Chart.js resize fires. */
.relative > canvas,
div[class*="h-["] > canvas {
  display: block;
  max-width: 100% !important;
}

/* Also ensure table wrappers don't push the page wider */
.fa-table-wrap,
.overflow-x-auto {
  max-width: 100%;
}

/* Number inputs in dark theme — keep width tame */
.fa-input,
input[type="number"],
input[type="text"],
select {
  max-width: 100%;
}

/* Pre — code blocks (embed code) must wrap on mobile */
pre,
textarea {
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
}
textarea.fa-embed-code,
textarea {
  white-space: pre-wrap;
}

/* ---------- 20. Mobile bottom padding safety ----------
   When the sticky bar is visible, body gets .fa-sticky-active
   which adds bottom padding (handled in section 5). For pages
   that don't have the sticky bar, ensure there's still some
   bottom breathing room before the footer on mobile. */
@media (max-width: 640px) {
  main > section:last-of-type {
    padding-bottom: var(--fa-space-12);
  }
}

/* ---------- 21. Categorized footer grid (v49) ----------
   The site's styles.css is a compiled Tailwind build that contains
   ONLY the utilities used when it was generated — responsive grid
   utilities like grid-cols-2 / sm:grid-cols-3 / lg:grid-cols-6 do
   not exist in it. The v49 category footer therefore uses this
   self-contained grid class instead of Tailwind utilities.
   2 columns on phones, 3 on small tablets, 6 across on desktop. */
.fa-footer-cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fa-space-8) var(--fa-space-6);
}
@media (min-width: 640px) {
  .fa-footer-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .fa-footer-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* Footer column headings + link lists */
.fa-footer-cats h3 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fa-text-tertiary, #94A3B8);
  margin: 0 0 0.75rem;
}
.fa-footer-cats ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
}

/* ---------- 21b. Dark-only palette alignment ----------
   DECISION (Option B): this site renders the dark theme on every
   page — dark-theme.css is always loaded and no <html> element
   carries the class "fa-dark-theme". The former "light-theme
   typography lightening" block that lived here used
   html:not(.fa-dark-theme) selectors, which therefore ALWAYS
   matched, and re-painted headings, body copy, labels and the
   logo in slate-600 (#475569) on the near-black page background
   (#0A0B0F) — a ~2.6:1 contrast failure. It has been deleted.

   Colour tokens that clash with dark-theme.css :root were also
   removed from section 1 above (fa-system.css loads LAST, so its
   :root used to override dark-theme's palette for every shared
   variable name). dark-theme.css is now the single source of
   truth for the shared palette; the fa-system-only tokens that
   remain in section 1 are pre-tuned for the dark background. */