/* ============================================================
   PROFITABLE AFFILIATE: visual identity. Site-specific.

   WHO THIS IS FOR
   People who run a site, a channel or a newsletter and are
   deciding which affiliate programs to join. Most have been
   burned at least once: "earn up to 50%" that turned into 8%,
   a 24-hour cookie, commissions reversed after 60 days, and a
   payout threshold they never reached. They're numbers people,
   or they're about to become numbers people.

   WHAT THE DESIGN HAS TO SAY
   We did the math. Everything on this site is the arithmetic
   under a marketing claim, so the site looks like the place
   that arithmetic happens: a clean spreadsheet.

   WHY IT DOESN'T LOOK LIKE AN AFFILIATE MARKETING SITE
   That category is gold gradients, laptop-on-a-beach photos and
   screenshots of dashboards with big numbers. This reader has
   learned to leave when they see that. Gridlines and monospaced
   figures are the opposite signal.

   COLOUR
   White cells and grey gridlines. Violet is the formula colour:
   analytical, distinct from bank blue and money green, and not
   used anywhere else in the portfolio. Verdicts use green for
   "holds up" and red for "doesn't," always next to the words.
   Lowest text contrast 5.7:1.

   TYPE
   Space Grotesk for headings, Manrope for reading, JetBrains
   Mono for every number, so figures line up and read as data.
   ============================================================ */

:root {
  --paper:      #ffffff;
  --grid:       #e5e7eb;
  --bar:        #f3f4f6;   /* formula bar and header cells */
  --ink:        #111827;   /* 17.7:1 */
  --ink-soft:   #4b5563;   /*  7.6:1 */
  --violet:     #5a3fd6;   /*  6.7:1; white on violet 6.7:1 */
  --violet-deep:#432db3;
  --violet-wash:#eeeafd;
  --holds:      #0f6b4f;
  --holds-wash: #e7f6ef;
  --fails:      #b42318;
  --fails-wash: #fdecea;
  --marker:     #fde68a;   /* highlighter, background only */

  --accent:     var(--violet);
  --accent-ink: #ffffff;
  --focus:      #b45309;   /* 5.0:1 on white, offset off the violet buttons */
  --measure:    66ch;

  --display: 'Space Grotesk', system-ui, 'Segoe UI', sans-serif;
  --body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

body { font-family: var(--body); font-size: 1.0625rem; line-height: 1.65; background: var(--paper); color: var(--ink); }

.wrap { width: min(72rem, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 46rem; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 0.75rem; }
h3 { font-size: 1.25rem; margin-bottom: 0.35rem; }
p + p { margin-top: 0.85rem; }
a { color: var(--violet); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--violet-deep); }
.mono, code { font-family: var(--mono); font-size: 0.92em; }
mark { background: var(--marker); color: var(--ink); padding: 0 0.15em; }

.eyebrow { font-family: var(--mono); font-size: 0.8125rem; color: var(--violet); margin-bottom: 0.6rem; }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 48ch; }

/* ---- Header ------------------------------------------------ */
.site-header { border-bottom: 1px solid var(--grid); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 0.85rem; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.35rem; min-height: 44px; }
.brand .fx { font-family: var(--mono); font-size: 0.85rem; font-weight: 600; color: #fff; background: var(--violet); border-radius: 6px; padding: 0.2rem 0.45rem; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.3rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--grid); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--violet); color: var(--violet); }

main { padding-block: 3rem 4.5rem; }
.hero { padding-bottom: 2.75rem; border-bottom: 1px solid var(--grid); }
.hero h1 { max-width: 20ch; margin-bottom: 1rem; }
.section { margin-top: 3.5rem; }

/* ---- THE FORMULA BAR ---------------------------------------
   Signature element. Looks like the bar above a spreadsheet, and
   it holds the actual equation the whole site is built on. */
.formula {
  display: flex; align-items: stretch; margin-top: 1.75rem;
  border: 1px solid var(--grid); border-radius: 10px; overflow: hidden; background: var(--paper);
}
.formula .fx { display: grid; place-items: center; padding: 0 0.9rem; background: var(--bar); border-right: 1px solid var(--grid); font-family: var(--mono); font-weight: 600; color: var(--violet); font-style: italic; }
.formula p { font-family: var(--mono); font-size: 0.95rem; padding: 0.8rem 1rem; max-width: none; overflow-wrap: anywhere; }

/* ---- Spreadsheet table -------------------------------------- */
.table-scroll { margin-top: 1.25rem; border: 1px solid var(--grid); border-radius: 10px; }
table.sheet { width: 100%; min-width: 40rem; font-size: 0.975rem; }
table.sheet th, table.sheet td { border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); padding: 0.7rem 0.9rem; text-align: left; vertical-align: top; }
table.sheet th:last-child, table.sheet td:last-child { border-right: 0; }
table.sheet tbody tr:last-child th, table.sheet tbody tr:last-child td { border-bottom: 0; }
table.sheet thead th { background: var(--bar); font-family: var(--mono); font-weight: 600; font-size: 0.8125rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
table.sheet tbody th { font-family: var(--display); font-weight: 700; }
table.sheet td.num { font-family: var(--mono); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.sheet tr.total th, table.sheet tr.total td { background: var(--violet-wash); font-weight: 700; }
table.sheet caption { caption-side: bottom; text-align: left; padding: 0.7rem 0.9rem; font-size: 0.875rem; color: var(--ink-soft); border-top: 1px solid var(--grid); }

/* ---- Verdict words ------------------------------------------ */
.verdict { display: inline-block; font-family: var(--mono); font-weight: 600; font-size: 0.8125rem; padding: 0.15rem 0.55rem; border-radius: 6px; white-space: nowrap; }
.verdict--holds { color: var(--holds); background: var(--holds-wash); }
.verdict--fails { color: var(--fails); background: var(--fails-wash); }
.verdict--mixed { color: var(--ink); background: var(--marker); }

/* ---- Cards -------------------------------------------------- */
.cards { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.card { border: 1px solid var(--grid); border-radius: 12px; padding: 1.25rem; max-width: none; background: var(--paper); }
.card .n { font-family: var(--mono); font-size: 0.8125rem; color: var(--violet); }
.flags { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.flags li { border: 1px solid var(--grid); border-left: 5px solid var(--fails); border-radius: 10px; padding: 0.9rem 1.1rem; max-width: none; }

/* ---- Calculator --------------------------------------------- */
.calc { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 1.5rem; align-items: start; }
.calc form, .calc .results { border: 1px solid var(--grid); border-radius: 12px; overflow: hidden; }
.calc .head { background: var(--bar); border-bottom: 1px solid var(--grid); padding: 0.6rem 1rem; font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-soft); margin: 0; max-width: none; }
.calc .fields { display: grid; gap: 0; }
.field { display: grid; grid-template-columns: 1fr 9rem; gap: 0.75rem; align-items: center; padding: 0.6rem 1rem; border-bottom: 1px solid var(--grid); }
.field label { font-weight: 600; font-size: 0.975rem; }
.field label small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.8125rem; }
.field input { font-family: var(--mono); text-align: right; padding: 0.45rem 0.6rem; border: 1px solid #9ca3af; border-radius: 6px; background: #fff; width: 100%; }
.calc .submit { padding: 0.9rem 1rem; }
.results dl { margin: 0; }
.results .row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--grid); }
.results .row:last-child { border-bottom: 0; }
.results dt { font-weight: 600; }
.results dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.results .row.key { background: var(--violet-wash); }
.results .row.key dd { font-weight: 600; color: var(--violet-deep); }

/* ---- Panels, buttons ---------------------------------------- */
.panel { border: 1px solid var(--grid); border-radius: 14px; padding: clamp(1.25rem, 3vw, 2rem); background: var(--bar); }
.panel--violet { background: var(--violet-wash); border-color: #d9d2fb; }
.empty { border: 2px dashed var(--grid); border-radius: 14px; padding: 2rem; text-align: center; }
.btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 1.25rem; background: var(--violet); color: #fff; border: 1px solid var(--violet); border-radius: 8px; font-weight: 700; text-decoration: none; cursor: pointer; font-size: 1rem; }
.btn:hover { background: var(--violet-deep); border-color: var(--violet-deep); color: #fff; }
.btn--ghost { background: #fff; color: var(--violet); }
.btn--ghost:hover { background: var(--violet-wash); color: var(--violet-deep); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.prose h2 { margin-top: 2.25rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.prose ul, .prose ol { padding-left: 1.25rem; margin-top: 0.5rem; }
.prose li { margin-bottom: 0.45rem; }

.signup { display: grid; gap: 0.6rem; max-width: 26rem; margin-top: 1rem; }
.signup label { font-weight: 700; }
.signup input { padding: 0.6rem 0.9rem; border: 1px solid #9ca3af; border-radius: 8px; }
.signup button { justify-self: start; }
.fine { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.75rem; }
.slot { border: 2px dashed var(--grid); border-radius: 12px; padding: 1rem 1.25rem; color: var(--ink-soft); }

/* ---- Footer ------------------------------------------------- */
.site-footer { border-top: 1px solid var(--grid); background: var(--bar); margin-top: 2rem; padding-block: 2.5rem 3rem; }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer h2 { font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: var(--ink); display: inline-block; padding-block: 0.3rem; }

@media (max-width: 52rem) {
  .calc { grid-template-columns: 1fr; }
}
@media (max-width: 30rem) {
  .field { grid-template-columns: 1fr; }
}
@media (forced-colors: active) {
  .verdict, .card, .panel, .btn, .formula, .table-scroll { border: 1px solid; }
}

/* ---- PROGRAMS LIST (added September 2026) -------------------
   Sierra's programs research, set in the same spreadsheet look:
   each program is a small sheet with mono row labels, and the
   status word always sits next to its colour. */
[hidden] { display: none !important; }

.key { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); margin-top: 1rem; }
.key p { border: 1px solid var(--grid); border-radius: 10px; padding: 0.85rem 1rem; max-width: none; }
.key .status { margin-right: 0.35rem; }
.status { display: inline-block; font-family: var(--mono); font-weight: 600; font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 6px; white-space: nowrap; }
.status--checked { color: var(--holds); background: var(--holds-wash); }
.status--directory { color: var(--ink); background: var(--marker); }

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.filters button { min-height: 44px; padding: 0 0.95rem; border: 1px solid #6b7280; border-radius: 999px; background: #ffffff; color: var(--ink); font-family: var(--body); font-weight: 600; font-size: 0.9375rem; cursor: pointer; }
.filters button:hover { border-color: var(--violet); color: var(--violet-deep); }
.filters button[aria-pressed="true"] { background: var(--violet); border-color: var(--violet); color: #ffffff; }
.count { font-family: var(--mono); font-size: 0.875rem; color: var(--ink-soft); margin-top: 0.85rem; }

.plist { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }
.prog { display: flex; flex-direction: column; border: 1px solid var(--grid); border-radius: 12px; background: var(--paper); overflow: hidden; max-width: none; }
.prog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; padding: 0.95rem 1rem 0.25rem; }
.prog-head h3 { margin: 0; font-size: 1.2rem; }
.prog-cat { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); padding: 0 1rem 0.75rem; margin: 0; }
.prog-sheet { margin: 0; border-top: 1px solid var(--grid); }
.prog-sheet div { display: grid; grid-template-columns: 6.75rem 1fr; border-bottom: 1px solid var(--grid); }
.prog-sheet dt { background: var(--bar); border-right: 1px solid var(--grid); padding: 0.45rem 0.75rem; font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.prog-sheet dd { margin: 0; padding: 0.45rem 0.75rem; font-size: 0.95rem; }
.prog-why { padding: 0.75rem 1rem 0; font-size: 0.95rem; color: var(--ink-soft); }
.prog-go { padding: 0.35rem 1rem 0.75rem; margin-top: auto; font-weight: 600; font-size: 0.95rem; }
.prog-go a { display: inline-flex; align-items: center; min-height: 44px; }
.panel--note { margin-top: 1.5rem; border-left: 5px solid var(--violet); }
.panel--note h3 { margin-bottom: 0.4rem; }
.card-go { margin-top: 0.6rem; font-weight: 600; }

@media (forced-colors: active) {
  .status, .prog, .filters button, .key p { border: 1px solid; }
}