/* Clips the money field so a drifting glyph can never push a
     horizontal scrollbar onto the page at narrow widths. */
  .floor-band{padding:var(--mid-pad-block) var(--mid-gutter);overflow:hidden}
  /* Two-selector specificity on purpose: .wrap defines its own grid
     later in this file and would otherwise win the tie and collapse
     this to a single narrow column. */
  /* 2026-07-22: .wrap was also pinning this band to a 1000px column
     with its own 40px padding, so The Floor sat visibly narrower than
     every chapter around it. Width and gutter now come from the shared
     middle-chapter tokens; the section owns the gutter, so the wrap
     zeroes .wrap's inner padding rather than doubling it. */
  /* 2026-07-22: cards left, copy right per the founder (the bands above lead
     with copy on the left, so this one alternates). DOM order stays
     txt-then-cards so the phone stack still opens with the copy. */
  .floor-band .floor-band-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,3.4vw,48px);align-items:center;text-align:left;
    max-width:var(--mid-w);margin:0 auto;padding:0}
  .floor-band .floor-band-txt{order:2}
  .floor-band .floor-band-cards{order:1}
  .floor-band-badge{display:inline-flex;align-items:center;gap:7px;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
  .floor-band-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:fbPulse 1.4s infinite}
  @keyframes fbPulse{0%,100%{opacity:1}50%{opacity:.35}}
  .floor-band-p{font-size:.94rem;line-height:1.62;color:var(--text-dim);max-width:46ch;margin-bottom:20px}
  .floor-band-cta{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:10px;background:var(--accent-solid,#b91c1c);color:#fff;font-weight:800;font-size:.9rem;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
  .floor-band-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(200,50,50,.24)}
  .floor-band-note{margin-top:13px;font-size:.74rem;font-weight:600;color:var(--text-dim);opacity:.8}
  .floor-band-ref{display:flex;align-items:center;gap:18px;margin:0 0 22px;max-width:100%}
  .floor-band-ref img{width:300px;height:auto;flex:none;border-radius:12px;display:block;
    border:1px solid rgba(29,25,21,.12);box-shadow:0 8px 26px rgba(29,25,21,.16)}
  .floor-band-ref span{font-size:.87rem;line-height:1.5;color:var(--text-dim);opacity:.85}
  @media(max-width:560px){.floor-band-ref{flex-direction:column;align-items:flex-start;gap:10px}.floor-band-ref img{width:100%;max-width:340px}}
  .floor-band-cards{display:grid;gap:13px;position:relative}
  /* Money field sits behind the cards, which each claim their own
     stacking context so nothing drifts over a stake number. */
  .fb-money{position:absolute;inset:-42px -30px;pointer-events:none;z-index:0}
  .fb-money span{position:absolute;left:var(--x);top:var(--y);
    font-family:var(--font-body);font-weight:700;line-height:1;
    font-size:calc(var(--s,1) * 40px);color:var(--accent);opacity:.09;
    animation:fbFloat 11s ease-in-out var(--d,0s) infinite}
  @keyframes fbFloat{
    0%,100%{transform:rotate(var(--r,0deg)) translateY(0)}
    50%    {transform:rotate(var(--r,0deg)) translateY(-14px)}
  }
  [data-theme="grey"] .fb-money span,[data-theme="crimson"] .fb-money span,
  [data-theme="stone"] .fb-money span,[data-theme="dark"] .fb-money span{opacity:.13}
  /* Solid, not var(--bg-card). On the light theme that token is
     rgba(0,0,0,.03) — a 3% black tint on cream, i.e. an invisible card.
     Same trap the 2026-05-20 light-theme contrast rebuild fixed on the
     Saved-tab dashboard: light surfaces must be BRIGHTER than the bg. */
  .floor-card{position:relative;z-index:1;background:#fffdf8;border:1px solid rgba(29,25,21,.13);border-radius:14px;padding:16px 18px;box-shadow:0 12px 30px rgba(29,25,21,.07)}
  [data-theme="grey"] .floor-card,
  [data-theme="crimson"] .floor-card,
  [data-theme="stone"] .floor-card,
  [data-theme="dark"] .floor-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);box-shadow:0 12px 30px rgba(0,0,0,.3)}
  .floor-card--b{margin-left:34px}
  /* ── Featured market (2026-07-22) ──────────────────────────────────
     The dramatic one. Bigger padding, a real chart, and the crowd row
     so the aggregation reads at a glance rather than as a thin bar. */
  .floor-card--hero{padding:20px 22px 18px;border-radius:18px;
    box-shadow:0 22px 52px rgba(29,25,21,.13),0 2px 6px rgba(29,25,21,.05)}
  [data-theme="grey"] .floor-card--hero,[data-theme="crimson"] .floor-card--hero,
  [data-theme="stone"] .floor-card--hero,[data-theme="dark"] .floor-card--hero{
    box-shadow:0 22px 52px rgba(0,0,0,.42)}
  .fb-hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .fb-hero-top .fb-fmt{margin-bottom:0}
  .fb-hero-clock{font-size:.68rem;font-weight:800;letter-spacing:.04em;color:var(--text-dim);
    font-variant-numeric:tabular-nums;background:rgba(29,25,21,.06);padding:3px 9px;border-radius:999px}
  [data-theme="grey"] .fb-hero-clock,[data-theme="crimson"] .fb-hero-clock,
  [data-theme="stone"] .fb-hero-clock,[data-theme="dark"] .fb-hero-clock{background:rgba(255,255,255,.09)}
  .fb-hero-motion{margin:10px 0 14px;font-family:var(--font-body);
    font-size:clamp(1.02rem,1.25vw,1.2rem);font-weight:700;line-height:1.25;
    letter-spacing:-.015em;color:var(--text)}
  .fb-hero-read{display:flex;align-items:center;gap:14px;margin-bottom:12px}
  .fb-hero-pct{display:flex;align-items:baseline;color:var(--accent);line-height:.86}
  .fb-hero-pct b{font-family:var(--font-body);font-size:clamp(3.1rem,5.4vw,4.3rem);
    font-weight:800;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
  .fb-hero-pct i{font-style:normal;font-size:clamp(1.3rem,2vw,1.7rem);font-weight:800;margin-left:2px}
  .fb-hero-lbl{font-size:.86rem;font-weight:700;color:var(--text-dim);line-height:1.3}
  .fb-hero-lbl b{color:var(--text);font-weight:800}
  .fb-hero-lbl span{display:block;margin-top:4px;font-size:.72rem;font-weight:600;opacity:.72}
  /* Price history. Same y-scale trick the hero card uses: the line is
     redrawn from its own range so a 45-55 drift fills the box instead of
     flattening to a hairline. */
  .fb-chart{position:relative;height:74px;margin:0 0 13px}
  .fb-chart svg{width:100%;height:100%;display:block}
  .fb-chart-area{fill:rgba(200,50,50,.10)}
  .fb-chart-line{fill:none;stroke:var(--accent);stroke-width:2.1;stroke-linejoin:round;stroke-linecap:round}
  .fb-chart-dot{position:absolute;right:-3px;width:9px;height:9px;border-radius:50%;
    background:var(--accent);box-shadow:0 0 0 4px rgba(200,50,50,.16);transform:translateY(-50%);
    transition:top .5s ease}
  .fb-hero-split{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:13px}
  .fb-side{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;
    gap:8px;padding:8px 11px;border-radius:9px;border:1px solid rgba(29,25,21,.12);
    font-size:.74rem;font-weight:700;color:var(--text-dim)}
  [data-theme="grey"] .fb-side,[data-theme="crimson"] .fb-side,
  [data-theme="stone"] .fb-side,[data-theme="dark"] .fb-side{border-color:rgba(255,255,255,.14)}
  .fb-side i{position:absolute;left:0;top:0;bottom:0;background:rgba(200,50,50,.10);
    transition:width .5s ease;z-index:0}
  .fb-side--con i{background:rgba(29,25,21,.07)}
  [data-theme="grey"] .fb-side--con i,[data-theme="crimson"] .fb-side--con i,
  [data-theme="stone"] .fb-side--con i,[data-theme="dark"] .fb-side--con i{background:rgba(255,255,255,.09)}
  .fb-side em,.fb-side b{position:relative;z-index:1;font-style:normal}
  .fb-side b{color:var(--text);font-weight:800;font-variant-numeric:tabular-nums}
  /* The crowd. This is the "public data gathering" beat: the price above
     is made of these people, so they are shown, not described. */
  .fb-crowd{display:flex;align-items:center;gap:10px;padding-top:12px;
    border-top:1px solid rgba(29,25,21,.10)}
  [data-theme="grey"] .fb-crowd,[data-theme="crimson"] .fb-crowd,
  [data-theme="stone"] .fb-crowd,[data-theme="dark"] .fb-crowd{border-top-color:rgba(255,255,255,.12)}
  .fb-crowd-faces{display:flex;flex:none}
  .fb-crowd-faces i{width:26px;height:26px;border-radius:50%;background-size:cover;background-position:50% 32%;
    border:2px solid #fffdf8;margin-left:-8px;box-shadow:0 1px 4px rgba(29,25,21,.18)}
  .fb-crowd-faces i:first-child{margin-left:0}
  [data-theme="grey"] .fb-crowd-faces i,[data-theme="crimson"] .fb-crowd-faces i,
  [data-theme="stone"] .fb-crowd-faces i,[data-theme="dark"] .fb-crowd-faces i{border-color:#16151a}
  .fb-crowd-txt{font-size:.76rem;font-weight:600;color:var(--text-dim)}
  .fb-crowd-txt b{color:var(--text);font-weight:800;font-variant-numeric:tabular-nums}
  @media(max-width:560px){
    .fb-hero-split{grid-template-columns:1fr}
    .fb-chart{height:60px}
  }
  .fb-fmt{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
  .fb-vs{font-size:.92rem;font-weight:700;color:var(--text);margin-bottom:11px}
  .fb-vs span{color:var(--text-dim);font-weight:600}
  .fb-bar{height:5px;border-radius:999px;background:rgba(29,25,21,.1);overflow:hidden}
  .fb-bar i{display:block;height:100%;border-radius:999px;background:var(--accent)}
  .fb-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:9px;font-size:.72rem;font-weight:700;color:var(--text-dim)}
  /* The stake is the point of the card, so it carries the money mark and
     full contrast while the crowd-split line stays dim.
     2026-07-22: this band read as money on purpose. struck coins,
     currency glyphs, a growing pot.
     2026-07-28: that treatment was pulled back. Coins, currency field
     and the word "pot" all went; the numbers stayed, labelled as play
     credits and calls. The band should read as a market board, which is
     the actual claim, and not as a table you buy in at. The note under
     the CTA ("Play credits today. No cash value, nothing to buy, nothing
     to win") is still the truth guard and must stay put and legible.
     Do NOT let cash imagery come back into this band or any copy that
     implies payouts. */
  /* Left padding was 7px to seat the coin glyph; symmetric now it is gone. */
  .fb-stake{display:inline-flex;align-items:center;gap:6px;flex:none;padding:4px 10px;border-radius:999px;
    background:rgba(200,50,50,.08);border:1px solid rgba(200,50,50,.16);font-size:.68rem;color:var(--text-dim)}
  .fb-stake b{font-size:1rem;font-weight:800;letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums}
  /* Coin struck with a currency mark. The stroke colour tracks the card
     fill so the "$" cuts through the coin on any theme instead of
     floating on top of it. */
  .fb-coin{width:14px;height:14px;flex:none;color:var(--accent)}
  [data-theme="grey"] .floor-card,[data-theme="crimson"] .floor-card,
  [data-theme="stone"] .floor-card,[data-theme="dark"] .floor-card{--fb-coin-hole:#211f1e}
  [data-theme="grey"] .fb-pot,[data-theme="crimson"] .fb-pot,
  [data-theme="stone"] .fb-pot,[data-theme="dark"] .fb-pot{--fb-coin-hole:#211f1e}
  .fb-win{background:rgba(21,128,61,.09);border-color:rgba(21,128,61,.2);color:#15803d}
  .fb-win b{color:#15803d}
  .fb-win .fb-coin{color:#15803d}
  /* Pot row. Wider than the cards on purpose: it is the summary line
     under them, so it spans the column and anchors the stack. */
  .fb-pot{position:relative;z-index:1;display:flex;align-items:center;gap:14px;margin-top:2px;
    padding:12px 18px;border-radius:14px;background:#fffdf8;border:1px solid rgba(29,25,21,.13);
    box-shadow:0 12px 30px rgba(29,25,21,.07)}
  [data-theme="grey"] .fb-pot,[data-theme="crimson"] .fb-pot,
  [data-theme="stone"] .fb-pot,[data-theme="dark"] .fb-pot{background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.14);box-shadow:0 12px 30px rgba(0,0,0,.3)}
  .fb-stack{width:46px;height:34px;flex:none;color:var(--accent)}
  .fb-pot-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
  .fb-pot-k{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);opacity:.75}
  .fb-pot-txt b{font-size:1.32rem;font-weight:800;letter-spacing:-.02em;color:var(--text);
    font-variant-numeric:tabular-nums;line-height:1.1}
  /* Neutral, not green. Green on this band means money won (.fb-win);
     a backer count is participation, so it stays quiet. */
  .fb-pot-tick{margin-left:auto;flex:none;font-size:.68rem;font-weight:800;color:var(--text-dim);
    padding:4px 9px;border-radius:999px;background:rgba(29,25,21,.05);border:1px solid rgba(29,25,21,.11)}
  [data-theme="grey"] .fb-pot-tick,[data-theme="crimson"] .fb-pot-tick,
  [data-theme="stone"] .fb-pot-tick,[data-theme="dark"] .fb-pot-tick{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
  @media (max-width:860px){
    /* Padding is no longer restated here: --mid-pad-block already
       clamps down to 17px a side at phone widths. */
    /* Two selectors to match the base rule above. As a bare
       .floor-band-wrap this lost the specificity tie and the band
       stayed two-column on phones. */
    .floor-band .floor-band-wrap{grid-template-columns:1fr;gap:26px}
    /* Stack goes back to copy-first: the desktop flip is an order swap,
       so it has to come off when the columns collapse. */
    .floor-band .floor-band-txt{order:0}
    .floor-band .floor-band-cards{order:0}
    .floor-card--b{margin-left:0}
    .fb-money span{font-size:calc(var(--s,1) * 30px)}
  }
  @media (prefers-reduced-motion:reduce){
    .floor-band-badge .dot{animation:none}
    .fb-money span{animation:none}
    .fb-chart-dot,.fb-side i{transition:none}
  }