/* assets/css/earnings.css — /earnings/ (Flight Earnings Calculator).
   Loaded alongside assets/css/public-calculators.css, whose tokens and
   .mkt-am / .mm-calc__* chrome this sheet extends rather than duplicates.

   Every colour is a var(--mm-*, #fallback) token reference, never a tokenless
   literal: a bare hex cannot follow the brand when --mm-* changes and cannot
   respond to a theme. assets/css/ is inside css-hex-guard's allowlist, so the
   fallbacks are house style rather than a CI gate. --mm-paper is deliberately
   left as-is: it is undefined repo-wide and used with three different
   fallbacks across live sheets, so picking one here would be a design
   decision made in the wrong file. */

.earn-panel { margin-top: 24px; }
.earn-panel__title { font-size: 20px; margin: 0 0 12px; }

.earn-segment {
  border: 1px solid var(--mm-border, #e2e5ea);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.earn-segment legend { font-size: 12px; font-weight: 700; padding: 0 4px; }
.earn-segment label { display: flex; flex-direction: column; font-size: 12px; gap: 4px; }
.earn-segment input {
  padding: 8px;
  border: 1px solid var(--mm-border, #e2e5ea);
  border-radius: 6px;
  background: var(--mm-paper, #fff);
  color: var(--mm-fg, #0E1F3B);
  font-size: 14px;
}
.earn-segment input.earn-field--amber { outline: 2px solid var(--mm-accent, #FF6810); }

.earn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.earn-privacy-line { font-size: 13px; color: var(--mm-fg-muted, #4A5B7A); margin-top: 12px; }

.earn-results { margin-top: 32px; }
.earn-results__rank-toggle { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.earn-results__rank-toggle button {
  padding: 8px 16px;
  border: 1px solid var(--mm-border, #e2e5ea);
  border-radius: 999px;
  background: var(--mm-paper, #fff);
  color: var(--mm-fg, #0E1F3B);
  cursor: pointer;
}
/* --mm-fg-inverse is the repo's on-dark/on-accent text token (lib/app.css:646,
   lib/mm-design-system.css:114); it resolves to #FFFFFF today, so this is a
   pure tokenisation with no visual change. */
.earn-results__rank-toggle button.is-active {
  background: var(--mm-accent, #FF6810);
  color: var(--mm-fg-inverse, #FFFFFF);
  border-color: transparent;
  font-weight: 700;
}
/* Deliberately NO winner styling: no first-row highlight, no badge, no rank
   number. The order is only sometimes a measurement, and a visual crown would
   assert a recommendation on the occasions when it is not. */
.earn-results__caption { font-size: 13px; color: var(--mm-fg-muted, #4A5B7A); margin: 0 0 12px; }

.earn-coverage { margin-top: 40px; }
.earn-table-scroll { overflow-x: auto; }
.earn-disclaimer { font-size: 12px; color: var(--mm-fg-muted, #4A5B7A); margin-top: 12px; }

@media (max-width: 480px) {
  .earn-segment { grid-template-columns: 1fr; }
}

/* Spoke door CTA arrival (/earnings/?src=spoke-<slug>&program=<code>).
   This is NOT the winner styling the comment above forbids: it marks the
   programme the visitor asked about on the way in, which is a statement about
   where they came from and not a claim about which programme is best. The
   caption says so in words whenever the row is actually hoisted. */
.earn-preselect-note { font-size: 13px; margin: 0 0 12px; color: var(--mm-fg-muted, #4A5B7A); }
.v2-policy-table tr.earn-row--preselected { background: var(--mm-accent-tint, #FFE8D6); }

/* Upload flow (Task 13). --mm-pace-amber / --mm-pace-amber-paper are the
   repo's real amber ink-and-paper pair (lib/app.css:632-633,
   lib/mm-design-system.css:91-92) and are semantically right here: this note
   is a caution state on a form field, which is what the pace-amber pair means
   everywhere else. --mm-amber-tint does NOT exist anywhere in the repo, so a
   var() reference to it would silently resolve to its fallback every time and
   the "token" would be decoration. */
.earn-tabs { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.earn-tab {
  padding: 8px 16px;
  border: 1px solid var(--mm-border, #e2e5ea);
  border-radius: 999px;
  background: var(--mm-paper, #fff);
  color: var(--mm-fg, #0E1F3B);
  cursor: pointer;
}
.earn-tab.is-active {
  background: var(--mm-accent, #FF6810);
  color: var(--mm-fg-inverse, #FFFFFF);
  border-color: transparent;
  font-weight: 700;
}

.earn-dropzone {
  border: 2px dashed var(--mm-border, #e2e5ea);
  border-radius: 12px;
  padding: 32px 16px;
  text-align: center;
  cursor: pointer;
  background: var(--mm-paper, #fff);
  color: var(--mm-fg, #0E1F3B);
}
.earn-dropzone:focus-visible { outline: 2px solid var(--mm-accent, #FF6810); outline-offset: 2px; }
.earn-dropzone.is-dragover { border-color: var(--mm-accent, #FF6810); background: var(--mm-accent-tint, #FFE8D6); }
.earn-dropzone p { margin: 0 0 8px; }
.earn-dropzone__hint { font-size: 13px; color: var(--mm-fg-muted, #4A5B7A); }

.earn-field-note { font-size: 13px; margin: 0 0 12px; color: var(--mm-fg-muted, #4A5B7A); }
.earn-field-note--amber {
  color: var(--mm-pace-amber, #985A0E);
  background: var(--mm-pace-amber-paper, #FBEAD2);
  padding: 8px 12px;
  border-radius: 8px;
}
.earn-fare-usd { display: flex; flex-direction: column; font-size: 12px; gap: 4px; margin-bottom: 12px; max-width: 220px; }
.earn-fare-usd input {
  padding: 8px;
  border: 1px solid var(--mm-border, #e2e5ea);
  border-radius: 6px;
  background: var(--mm-paper, #fff);
  color: var(--mm-fg, #0E1F3B);
  font-size: 14px;
}
.earn-fare-usd input.earn-field--amber { outline: 2px solid var(--mm-accent, #FF6810); }

/* "Report a wrong number", one per results row (Task 19). Styled as a quiet
   text control rather than a button: it sits in every row of a data table and
   a row of filled buttons would out-shout the numbers the table exists to
   show. Colour tokens only, per this file's header note. */
.earn-report-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--mm-fg-muted, #4A5B7A);
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}
.earn-report-link:hover { color: var(--mm-accent, #FF6810); }
.earn-report-link:focus-visible { outline: 2px solid var(--mm-accent, #FF6810); outline-offset: 2px; }
.earn-report-link[disabled] { color: var(--mm-fg-muted, #4A5B7A); text-decoration: none; cursor: default; }

/* The signup link in the dropzone's rate-limit / budget-paused message. The
   surrounding stylesheet strips link decoration inside the dropzone, so
   without this the one CTA on that screen renders as plain bold text and does
   not read as clickable at all. */
#earn-signup-link {
  color: var(--mm-accent, #FF6810);
  text-decoration: underline;
  font-weight: 600;
}
#earn-signup-link:focus-visible { outline: 2px solid var(--mm-accent, #FF6810); outline-offset: 2px; }