/* Funded Props: the plan picker, the rules list and the pick builder. 2026-09-27.
   Built on the site's own vocabulary (gen-preview and the gp-* workspace, ref-table, drawers,
   hud-card, block-note). This file only adds what those have no equivalent for, and every
   colour is a var(--...) from site.css or funded.css, so the light theme follows. Phone first:
   everything stacks at 390 and the workspace becomes three columns only when its own box is
   wide enough (the container query lives in site.css). */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- buttons inside the workspace --------------------------------------------------------- */
/* site.css draws gp-chip and gp-cta for a still picture. Here they are real controls, so they
   get a pointer, a focus ring and a disabled look, and nothing else changes. */
.fp-picker button.gp-chip,
.fp-builder button.gp-chip,
.fp-builder button.gp-mini,
.fp-builder .fp-pick {
  font: inherit;
  background: transparent;
  cursor: pointer;
}
/* The submit keeps site.css's gilt fill; it only needs a button's cursor and edge. */
.fp-builder button.gp-cta {
  font-family: var(--display);
  border: 1px solid var(--brass-deep);
  line-height: 1.4;
  min-height: 2.5rem;
  padding: 6px 14px;
  cursor: pointer;
}
.fp-picker button:focus-visible,
.fp-builder button:focus-visible,
.fp-builder input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.fp-builder button[disabled] { opacity: 0.45; cursor: not-allowed; }
.fp-builder .gp-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.fp-builder .gp-actions .btn { padding: 5px 10px; font-size: 0.76rem; }
.fp-picker, .fp-builder { user-select: text; }

/* ---- the plan picker ------------------------------------------------------------------------ */
.fp-picker { padding: var(--s4); }
.fp-picker__controls { margin-bottom: var(--s4); }
.fp-picker__controls .gp-chips { margin-bottom: var(--s2); }
.fp-picker .gp-chip { min-height: 2.25rem; padding: 6px 12px; }
.fp-picker__table { margin: 0; }
/* The row labels read as words, not as column heads: sentence case, the interface face. */
.fp-phase-table th[scope="row"] {
  color: var(--muted);
  font-family: var(--ui);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}
.fp-phase-table td.num,
.fp-phase-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* At 390 a two-phase plan is four columns. Letting a cell wrap onto two lines (the unset
   label, or a percent over its dollar figure) keeps all four on screen instead of hiding the
   last one off the edge. */
.fp-phase-table td,
.fp-phase-table th { white-space: normal; padding-left: 6px; padding-right: 6px; }
.fp-phase-table th[scope="row"] { min-width: 5.5rem; }
@media (max-width: 699px) {
  .fp-picker { padding: var(--s3) 10px; }
  .fp-phase-table { font-size: 0.8rem; }
  .fp-phase-table td,
  .fp-phase-table th { padding-left: 4px; padding-right: 4px; }
}
@media (min-width: 700px) {
  .fp-phase-table td,
  .fp-phase-table th { white-space: nowrap; padding-left: 12px; padding-right: 12px; }
}
.fp-unset { color: var(--muted); font-style: italic; }
.fp-picker__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.fp-picker__foot .form-fine { flex: 1 1 100%; margin: 0; }
.fp-price { margin: 0; color: var(--muted); }
.fp-price strong { color: var(--text); font-variant-numeric: tabular-nums; }
.fp-cta[disabled] { opacity: 0.7; cursor: not-allowed; }
.fp-picker--compact { margin-bottom: var(--s5); }
.fp-picker--compact .fp-picker__controls { margin-bottom: 0; }
.fp-more { margin: var(--s5) 0 var(--s3); }

/* ---- the rules ------------------------------------------------------------------------------ */
.fp-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.fp-rule {
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-bg);
}
.fp-rule__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s2); }
.fp-rule__title { margin: 0; font-family: var(--display); font-size: var(--t-lead); line-height: 1.2; color: var(--text); }
.fp-rule__value { margin: 0; font-family: var(--mono); font-size: 0.86rem; color: var(--brass-bright); font-variant-numeric: tabular-nums; }
.fp-rule__value.fp-unset { color: var(--muted); }
.fp-rule__body { margin: 0 0 var(--s2); max-width: 70ch; color: var(--text); }
.fp-rule__example { margin: 0; max-width: 70ch; color: var(--muted); }
.fp-rule__example b { color: var(--text); font-weight: 600; }
@media (min-width: 900px) {
  .fp-rules { grid-template-columns: 1fr 1fr; }
}

/* ---- the builder ---------------------------------------------------------------------------- */
/* site.css lays hud-card rows out as a narrow icon column and a label. Here each row is a label
   and a figure, one per line on a phone and in columns once there is room. */
.fp-summary .hud-card__rows { grid-template-columns: 1fr; gap: var(--s2) var(--s5); }
.fp-summary .hud-card__rows li {
  grid-template-columns: 1fr auto;
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--line-soft);
  letter-spacing: normal;
}
.fp-summary .hud-card__rows b { color: var(--text); font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
@media (min-width: 600px) { .fp-summary .hud-card__rows { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .fp-summary .hud-card__rows { grid-template-columns: repeat(4, 1fr); } }
/* site.css paints .hud-card with a fixed charcoal wash and never restates it for the light
   theme, so on light every card went dark on dark. Same fix the leaderboard carries. */
:root[data-theme="light"] .fp-summary {
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  border-color: var(--line);
}
.fp-builder { user-select: text; }
.fp-builder .gp-rail { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.fp-list { max-height: 18rem; overflow-y: auto; }
.fp-list .gp-row { padding: 0; }
.fp-pick {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  width: 100%;
  min-height: 2.5rem;
  padding: 6px 4px;
  border: 0;
  color: var(--text);
  text-align: left;
}
.fp-pick small { color: var(--muted); font-size: 0.72rem; white-space: nowrap; }
.fp-pick[aria-pressed="true"] { color: var(--brass-bright); box-shadow: inset 2px 0 0 var(--brass); }
.fp-search { width: 100%; margin-bottom: var(--s2); text-align: left; color: var(--text); font: inherit; }
.fp-empty { margin: var(--s2) 0; color: var(--muted); font-size: 0.82rem; }
.fp-player-name { color: var(--text); font-weight: 600; }

.fp-market { margin-bottom: var(--s4); }
.fp-market h3 { margin: 0 0 var(--s2); font-family: var(--ui); font-size: 0.86rem; font-weight: 600; color: var(--text); }
.fp-lines-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fp-lines-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding: 6px 4px;
  border-bottom: 1px solid var(--line);
}
.fp-lines-table td { padding: 6px 4px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.fp-lines-table td.num, .fp-lines-table th.num { text-align: right; }
.fp-lines-table .gp-mini { min-width: 4.4rem; min-height: 2.25rem; margin: 0; text-align: center; }
.fp-book small { display: block; }
.fp-age { color: var(--muted); font-size: 0.72rem; white-space: nowrap; }
.fp-rec-sub { display: block; }
/* A side the ticket cannot take stays drawn with its price, disabled, and the reason is a muted line
   under its row (funded-props-builder.js whyText), since a phone has no hover for a title. */
.fp-lines-table tr.fp-has-why td { border-bottom: 0; }
.fp-lines-table td.fp-why { padding-top: 0; color: var(--muted); font-size: 0.72rem; text-align: right; }
.fp-market { overflow-x: auto; }

.fp-kind { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass); }
.fp-legs { list-style: none; margin: 0 0 var(--s3); padding: 0; }
.fp-leg {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s2);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line-soft);
}
.fp-leg__text { display: flex; flex-direction: column; gap: 2px; }
.fp-leg__text small { color: var(--muted); }
.fp-stake { margin-bottom: var(--s2); }
.fp-stake__input { width: 100%; min-height: 2.5rem; text-align: left; color: var(--text); font: inherit; font-size: 16px; }
.fp-note { margin: var(--s2) 0 0; color: var(--muted); font-size: 0.8rem; }
.fp-errors { list-style: none; margin: 0; padding: 0; color: var(--danger); font-size: 0.8rem; }
.fp-errors li { margin-top: var(--s1); }
.fp-picks td, .fp-picks th { white-space: nowrap; }
.fp-picks td.num, .fp-picks th.num { text-align: right; font-variant-numeric: tabular-nums; }
.fp-picks td.fp-pick-cell { white-space: normal; min-width: 12rem; }

/* ---- the Funded Beta chip (2026-09-30) ----------------------------------------------------------
   On the tester's own Funded Props pages, so a simulated beta account never reads as a paid one. */
.fp-beta-chip {
  display: inline-block;
  margin-left: var(--s2);
  padding: 0.12em 0.5em;
  border: 1px solid var(--brass);
  border-radius: var(--radius-xs);
  color: var(--brass);
  font-family: var(--ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---- the light default (2026-10-23) -------------------------------------------------------------
   These pages open in the site's light theme unless the visitor saved a choice
   (funded-props-light.js). Light is site.css's own palette, restated nowhere here. The one thing it
   does not cover: site.css gives .gp-val, which is a real input on the builder, a fixed dark wash
   drawn for a still picture on the dark ground, and on light that read as a grey slab. The field
   token is the site's own input ground in each theme. */
:root[data-theme="light"] .fp-builder .gp-val { background: var(--field-bg); color: var(--text); }

/* ---- the checkout (2026-10-23) ------------------------------------------------------------------
   One plan, its facts, its price, who can buy it, one box and one button. The order card is the
   picker's own workspace panel, so it reads like the plans page it came from. */
.fpc-order { max-width: 44rem; }
.fpc-title { margin: 0 0 var(--s3); font-family: var(--display); font-size: var(--t-lead); line-height: 1.2; color: var(--text); }
.fpc-facts { margin: 0 0 var(--s4); display: grid; gap: 0; }
.fpc-fact {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line-soft);
}
.fpc-fact dt { color: var(--muted); font-size: 0.86rem; }
.fpc-fact dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 499px) {
  .fpc-fact { grid-template-columns: 1fr; gap: 2px; }
}
.fpc-price { margin: 0 0 var(--s3); color: var(--muted); }
.fpc-price strong { color: var(--text); font-size: var(--t-lead); font-variant-numeric: tabular-nums; }
.fpc-was { color: var(--muted); font-variant-numeric: tabular-nums; }
.fpc-once { font-size: 0.86rem; }
.fpc-offer { margin: 0 0 var(--s3); }
.fpc-terms { margin: 0 0 var(--s4); padding-left: 1.2em; color: var(--text); }
.fpc-terms li { margin-bottom: var(--s1); max-width: 70ch; }
.fpc-actions { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin: var(--s3) 0; }
.fpc-actions .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.fp-offer-note { margin: 0 0 var(--s3); }
.fp-payout { display: grid; gap: var(--s2); justify-items: start; }
.fp-payout__text { margin: 0; }
.fp-payout .status { margin: 0; }

/* ---- design review fixes (2026-10-31) -------------------------------------------------------
   site.css is the marketing site's, byte for byte, so every Funded-only correction lives here.
   This file loads on the Funded Props and Funded Beta pages only. */

/* The page plate (.hero__media--page) is position:absolute here (motion.css) with an opaque ground,
   so on a short page it painted over the static footer. Same fix analytics.css carries: the
   content and the footer stack above it. */
body:is(.page-funded-props, .page-funded-props-builder, .page-funded-props-rules, .page-beta, .page-beta-rules, .page-beta-board) main,
body:is(.page-funded-props, .page-funded-props-builder, .page-funded-props-rules, .page-beta, .page-beta-rules, .page-beta-board) .site-footer {
  position: relative;
  z-index: 1;
}

/* site.css's .hero__inner (max-width 40rem) won over .wrap's width, so the hero block sat
   centred while every section heading started at the wrap's left edge. The wrap keeps its full
   width here; the title and lede keep their own measures (16ch and 38ch). */
.hero > .hero__inner.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); }

/* "Three steps": a plain ol brought a 40px indent and bare grey numbers. Flush with the heading,
   and the number takes the site's step badge (site.css .step__no: a brass ring, a round ground). */
ol.drawers { list-style: none; margin: 0; padding: 0; }
.drawers .drawer { grid-template-columns: 31px 1fr; }
.drawers .drawer__no {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  background: var(--bg);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--brass-bright);
}
:root[data-theme="light"] .drawers .drawer__no { color: var(--brass-deep); }
.drawers + .block-note { margin-top: var(--s5); }

/* Phone tap targets: the program and size chips were 36px. */
@media (max-width: 699px) {
  .fp-picker button.gp-chip,
  .fp-builder button.gp-chip { min-height: 2.75rem; }
}

/* The rules page cards sat in a grid that stretched each to its row's tallest. */
.fp-rules { align-items: start; }

/* ---- phone tables (2026-10-28) -------------------------------------------------------------
   At 390 the lines table was 529px in a 308px box: the no-vig column was cut and his records were
   off-screen. On a phone each book row is two lines on a 12-column grid: Book, Line, Over, Under
   first, then the no-vig price and his last 10 and last 20 across the full width, each under its
   own name (data-label, set by funded-props-builder.js) since their column heads are hidden. The
   picks table cut the pick text the same way; there each pick stacks: when, the full pick, then
   stake, returns and result side by side. Desktop is unchanged. */
@media (max-width: 699px) {
  .fp-lines-table,
  .fp-lines-table thead,
  .fp-lines-table tbody { display: block; }
  .fp-lines-table tr {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    border-bottom: 1px solid var(--line-soft);
  }
  .fp-lines-table thead tr { border-bottom: 1px solid var(--line); }
  .fp-lines-table th,
  .fp-lines-table td { border-bottom: 0; }
  .fp-lines-table tr > :nth-child(1) { grid-column: span 4; }
  .fp-lines-table tr > :nth-child(2) { grid-column: span 2; }
  .fp-lines-table tr > :nth-child(3),
  .fp-lines-table tr > :nth-child(4) { grid-column: span 3; }
  .fp-lines-table th.fp-extra { display: none; }
  .fp-lines-table td.fp-extra {
    grid-column: span 4;
    align-self: start;
    padding-top: 0;
    text-align: left;
    font-size: 0.78rem;
  }
  .fp-lines-table td.fp-extra .fp-age { white-space: normal; }
  .fp-lines-table td.fp-extra::before,
  .fp-picks td[data-label]:not(.fp-placed)::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .fp-lines-table .gp-mini { box-sizing: border-box; min-width: 0; width: 100%; padding-left: 2px; padding-right: 2px; }
  .fp-lines-table tr.fp-has-why { border-bottom: 0; }
  .fp-lines-table tr.fp-why-row > td { grid-column: 1 / -1; text-align: left; }

  .fp-picks,
  .fp-picks tbody { display: block; }
  .fp-picks thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .fp-picks tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s1) var(--s2);
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .fp-picks td { white-space: normal; padding: 0; border-bottom: 0; }
  .fp-picks td.num { text-align: left; }
  .fp-picks td.fp-placed { grid-column: 1 / -1; color: var(--muted); font-size: 0.78rem; }
  .fp-picks td.fp-pick-cell { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; }
}