/* ═══════════════════════════════════════════════════════════════════
   myFSpal tool theme · shared layer ("Spruce & Gold")
   Direction copied from the Salary Calculator (VibeCurb visual-redesign pass):
   warm paper, one flat ink block per view, one gold signal, Outfit for display,
   Inter for reading, JetBrains Mono for figures, large radii, hairline borders.
   Palette taken from the website: spruce #203a3d (primary), sage #e8efe4 (secondary),
   #c7d9c6 and #8fb28d (hover tints). Gold #e9b949 is the exemplar's one signal colour.

   Loaded LAST in each tool's <head>, before that tool's own mfp-theme.css.
   It changes no HTML structure, id, data-* attribute or script.
   To revert one tool: delete its two <link> lines.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* palette */
  --mfp-ink: #203a3d;          --mfp-ink-rgb: 32, 58, 61;
  --mfp-ink-2: #2f5053;        /* hover / raised ink */
  --mfp-paper: #f2f6ee;        /* page background */
  --mfp-card: #fdfefb;         /* card surface */
  --mfp-surface-2: #e8efe4;    /* website sage: wells, table heads, hover */
  --mfp-sage-300: #c7d9c6;     /* website tint */
  --mfp-sage-500: #8fb28d;     /* website hover tint */
  --mfp-text: #14201f;
  --mfp-muted: #55655f;        /* 6.1:1 on card */
  --mfp-hint: #66786f;         /* 4.7:1 on card: placeholders and captions only */
  --mfp-line: rgba(32, 58, 61, 0.14);
  --mfp-line-strong: rgba(32, 58, 61, 0.30);
  --mfp-signal: #e9b949;       --mfp-signal-rgb: 233, 185, 73;
  --mfp-on-signal: #14110c;
  --mfp-signal-deep: #8a5f00;  /* gold as text on light surfaces (5.6:1) */
  --mfp-ok: #2d6a4f;           --mfp-ok-bg: #dcefe2;
  --mfp-warn: #7a5200;         --mfp-warn-bg: #fff3cd;
  --mfp-danger: #b3261e;       --mfp-danger-bg: #fbeceb;
  --mfp-on-ink: #f2f6ee;
  --mfp-on-ink-dim: rgba(242, 246, 238, 0.68);
  /* type */
  --mfp-display: 'Outfit', 'Inter', system-ui, sans-serif;
  --mfp-body: 'Inter', system-ui, sans-serif;
  --mfp-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* shape */
  --mfp-r-sm: 10px; --mfp-r-md: 14px; --mfp-r-lg: 22px; --mfp-r-full: 9999px;
  --mfp-shadow: 0 1px 2px rgba(20, 32, 31, 0.05), 0 8px 24px -12px rgba(20, 32, 31, 0.12);
  --mfp-lift: 0 1px 2px rgba(20, 32, 31, 0.05), 0 24px 44px -20px rgba(20, 32, 31, 0.28);
  --mfp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mfp-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2355655f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* page */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--mfp-body);
  color: var(--mfp-text);
  background:
    radial-gradient(60rem 28rem at 0% -8%, rgba(var(--mfp-signal-rgb), 0.13), transparent 62%),
    radial-gradient(52rem 30rem at 100% 0%, rgba(var(--mfp-ink-rgb), 0.06), transparent 60%),
    var(--mfp-paper);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
::selection { background: var(--mfp-signal); color: var(--mfp-on-signal); }
::placeholder { color: var(--mfp-hint); opacity: 1; }
:focus-visible { outline: 2px solid var(--mfp-signal); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--mfp-display); letter-spacing: -0.02em; color: var(--mfp-text); }
h1 { font-weight: 600; letter-spacing: -0.035em; line-height: 1.06; text-wrap: balance; }
.mfp-fig, .num { font-variant-numeric: tabular-nums; }

/* reduced motion: the exemplar animates lift on hover; honour the user's setting */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ── shared helpers the per-tool sheets use ─────────────────────────── */
.mfp-skip { position: absolute; left: -9999px; top: 0; background: var(--mfp-ink); color: var(--mfp-on-ink); padding: 0.6rem 1rem; border-radius: 0 0 var(--mfp-r-sm) 0; z-index: 1000; }
.mfp-skip:focus { left: 0; }
.mfp-note {
  margin: 1.5rem auto 0; max-width: 62ch; font: 400 0.8rem/1.55 var(--mfp-body); color: var(--mfp-muted); text-align: center;
}
.mfp-note strong { color: var(--mfp-text); font-weight: 600; }