/* YieldMeister — "finance broadsheet" theme.
   Editorial paper + serif headlines (Newsreader) + Inter UI with
   tabular-figure rates. Deep evergreen brand, warm gold accents.
   Light + dark (prefers-color-scheme). */
:root {
  --paper: #faf8f3;
  --paper-2: #f3eee4;
  --card: #fffefb;
  --ink: #1b1a17;
  --ink-soft: #56514a;
  --ink-faint: #8c867b;
  --muted: var(--ink-soft);
  --line: rgba(27, 26, 23, 0.12);
  --line-strong: rgba(27, 26, 23, 0.22);
  --ever: #16463a;       /* evergreen panel/brand fill */
  --ever-fg: #16463a;    /* evergreen as foreground (links, rates) */
  --ever-2: #0f3329;
  --pos: #0c8a5c;
  --pos-soft: #e6f3ec;
  --gold: #9c6f1c;
  --gold-deep: #7d5712;
  --gold-soft: #f6edd6;
  --rust: #a23b2e;
  --rust-soft: #f6e2dd;
  --row-hover: #fbf7ee;
  --header-bg: rgba(250, 248, 243, 0.82);
  --radius: 14px;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14130f;
    --paper-2: #1e1b15;
    --card: #1a1812;
    --ink: #f1ece1;
    --ink-soft: #b4ac9d;
    --ink-faint: #867e70;
    --line: rgba(241, 236, 225, 0.13);
    --line-strong: rgba(241, 236, 225, 0.24);
    --ever: #16463a;       /* panel stays deep green */
    --ever-fg: #5cc79b;    /* bright mint for text on dark */
    --ever-2: #0f3329;
    --pos: #43c98f;
    --pos-soft: #16352a;
    --gold: #d8a43a;
    --gold-deep: #e3b341;
    --gold-soft: #352b16;
    --rust: #e0907f;
    --rust-soft: #3a221c;
    --row-hover: rgba(241, 236, 225, 0.04);
    --header-bg: rgba(20, 19, 15, 0.82);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-optical-sizing: auto;
  color: var(--ink);
  letter-spacing: -0.012em;
  line-height: 1.12;
}

a { color: var(--ever-fg); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: rgba(22, 70, 58, 0.18); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
main { display: block; }

/* ---------- editorial kicker / eyebrow ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 13px;
}

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 30;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; }
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--serif); font-weight: 600; font-size: 1.32rem;
  letter-spacing: -0.015em; color: var(--ink);
}
.brand:hover { text-decoration: none; }
.brand img { width: 27px; height: 27px; border-radius: 7px; }
header.site nav { display: flex; align-items: center; gap: 22px; }
header.site nav a {
  color: var(--ink-soft); font-size: 0.92rem; font-weight: 500;
  letter-spacing: 0.005em;
}
header.site nav a:hover { color: var(--ink); text-decoration: none; }

/* ---------- hero ---------- */
.hero { padding: 60px 0 28px; }
.hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.5rem);
  line-height: 1.07; letter-spacing: -0.022em; margin: 0 0 16px;
  max-width: 19ch;
}
.hero p {
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  line-height: 1.55; max-width: 60ch; margin: 0 0 16px;
}
.hero p.eyebrow { font-size: 0.74rem; }
.hero p a { font-weight: 600; }
.hero .sub { font-size: 0.95rem; color: var(--ink-faint); }
.hero .sub a { color: var(--ink-soft); }

/* ---------- preview banner ---------- */
.banner {
  background: var(--gold-soft); border: 1px solid var(--line-strong); color: var(--gold-deep);
  border-radius: 10px; padding: 11px 15px; font-size: 0.9rem; margin: 16px 0; line-height: 1.5;
}
.banner strong { color: var(--ink); }

/* ---------- sections ---------- */
.section { padding: 42px 0; }
.section h2 { font-size: clamp(1.4rem, 3vw, 1.95rem); margin: 0 0 18px; letter-spacing: -0.016em; }

/* ---------- filter controls ---------- */
.controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 14px; }
.controls select, .controls input {
  padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--card); font: inherit; font-size: 0.92rem; color: var(--ink);
}
.controls select:focus, .controls input:focus { outline: 2px solid var(--ever-fg); outline-offset: 1px; border-color: var(--ever-fg); }
.controls button { font: inherit; }

/* ---------- tables ---------- */
.tablecard {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 1px 2px rgba(27, 26, 23, 0.04);
}
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
thead th {
  text-align: left; background: var(--paper-2); color: var(--ink-faint);
  font-weight: 600; font-size: 0.71rem; text-transform: uppercase; letter-spacing: 0.09em;
  padding: 12px 16px;
}
tbody td { padding: 14px 16px; border-top: 1px solid var(--line); vertical-align: middle; }
tbody tr:hover { background: var(--row-hover); }
.rate {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.06rem;
  color: var(--ever-fg); letter-spacing: -0.01em;
}
.prov { font-weight: 600; }
.prov a { color: var(--ink); }
.prov a:hover { color: var(--ever-fg); }
.sub { color: var(--ink-soft); font-size: 0.82rem; }
.flag { font-size: 0.82rem; color: var(--ink-faint); }

/* ---------- pills ---------- */
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; }
.pill.kind { background: var(--paper-2); color: var(--ink-soft); border: 1px solid var(--line); }
.pill.promo { background: var(--rust-soft); color: var(--rust); }
.pill.sample { background: var(--gold-soft); color: var(--gold-deep); }
.pill.live { background: var(--pos-soft); color: var(--pos); }
.pill.stale { background: var(--paper-2); color: var(--ink-faint); border: 1px solid var(--line-strong); }

/* ---------- buttons / CTA ---------- */
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.btn { display: inline-block; background: var(--ever); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 0.95rem; font-family: inherit; border: 1px solid transparent; cursor: pointer; }
.btn:hover { background: var(--ever-2); color: #fff; text-decoration: none; }

/* ---------- cards / product ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: 0 1px 2px rgba(27, 26, 23, 0.04);
}
.card p { max-width: 70ch; }
.kpi {
  font-variant-numeric: tabular-nums; font-size: 2.8rem; font-weight: 700;
  color: var(--ever-fg); letter-spacing: -0.02em; line-height: 1; margin-bottom: 4px;
}
.spark { width: 100%; height: 64px; display: block; }

/* ---------- API code block ---------- */
.api { background: var(--ever); color: #d8e7df; border-radius: var(--radius); padding: 22px; overflow: auto; }
.api pre { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, "Cascadia Code", monospace; font-size: 0.85rem; line-height: 1.6; white-space: pre; }
.api .tok { color: #e3b341; }

/* ---------- footer ---------- */
footer.site {
  border-top: 1px solid var(--line); margin-top: 56px; padding: 32px 0 44px;
  color: var(--ink-soft); font-size: 0.88rem; line-height: 1.8; background: var(--paper);
}
footer.site a { color: var(--ink-soft); }
footer.site a:hover { color: var(--ink); }
footer.site a.builtby { white-space: nowrap; }
footer.site a.builtby:hover { text-decoration: none; }
/* Dark footer: let the dutchcode wordmark inherit the (light) text colour;
   the gold arrow path keeps its own fill. */
@media (prefers-color-scheme: dark) {
  footer.site a.builtby svg g { fill: currentColor; }
}

/* ---------- Sentry feedback widget — match the brand ---------- */
#sentry-feedback {
  --background: var(--card);
  --foreground: var(--ink);
  --accent-background: var(--ever);
  --accent-foreground: #ffffff;
  --border: 1px solid var(--line-strong);
  --box-shadow: 0 6px 28px rgba(27, 26, 23, 0.16);
  --font-family: var(--sans);
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .hide-sm { display: none; }
  tbody td, thead th { padding: 11px 10px; }
  .hero { padding: 40px 0 20px; }
  header.site nav { gap: 15px; }
  .section { padding: 32px 0; }
}