/* ═══ SFTi — THE TRACTION PILL. One card, both public pages. ═══════════════════════════

   Operator ask (2026-08-20): a small pill showing signup + visit counts, "for expansion and
   funding later", inserted into the gap between the pinned header's gold line and the first
   chapter's content — WITHOUT moving anything else on the page.

   ★ WHY ABSOLUTE, NOT FLOW. `main` already reserves `calc(var(--header-clearance) + 1.5rem)` of
   top padding so its content clears the FIXED header (app/shared/css/header.css) — that reserve
   IS the gap the operator is pointing at. Adding this pill in normal flow would need to grow that
   reserve (pushing the first chapter down) or steal from it (pushing the chapter up). Either way,
   something moves. Positioned `absolute` against `main` (which already declares
   `position: relative` in both index/ and shop/'s own layout.css), the pill paints INSIDE the
   existing reserve instead of adding to it — main's padding, `--header-clearance`, and every
   chapter's position are all untouched.

   ★ WHY `--header-clearance`, NOT A NEW MEASUREMENT. It is already the exact, live-measured
   distance from the viewport top to the header's real bottom edge (app/shared/js/header-
   clearance.js, ResizeObserver-driven) — reusing it means the pill tracks the header's true
   height (including the safe-area inset on a notched phone) with no second source of truth to
   drift out of sync.

   ★ IT SCROLLS OFF, IT DOES NOT DOCK. Unlike the header (fixed) or the chapter head (sticky at
   the same `--header-clearance` offset), this pill is a normal (non-fixed, non-sticky) descendant
   of `main` — so as the page scrolls, it moves up and off-screen with the rest of the top-of-page
   content, well before the chapter head arrives to dock in the same band. The two never occupy
   the viewport at once. */

/* ── THE ROW — two pills, one band (operator 2026-09-11: "a second floating button next to
   tracking ... that matches the way the tracker looks") ──────────────────────────────────────
   ★ THE POSITIONING MOVED UP TO THE ROW AND THE PILL BECAME A FLEX CHILD, which is what lets a
   SECOND pill sit beside the first without either of them being centred independently. Two
   elements each carrying `left: 50%; translateX(-50%)` would stack ON each other, not next to
   each other — the centring has to belong to the container the moment there is more than one.
   Every reason the pill gave for being absolute still holds and is inherited here verbatim: it
   paints INSIDE `main`'s existing `--header-clearance` reserve rather than adding to it, so no
   chapter moves; it reads the live-measured clearance rather than a second measurement; and it
   scrolls off rather than docking, so it never shares the viewport with the chapter head.
   ⚠⚠ `nowrap` — THE PAIR STAYS SIDE BY SIDE AND SHRINKS TO FIT, IT NEVER STACKS (operator
   2026-09-11, on a screenshot of it stacked: "next too not under.. keeping them in the centered
   format they are in"). The first build wrapped, and wrapping is the one thing this band cannot
   afford: a second line doubles the row's height into a reserve sized for ONE pill, so the lower
   pill lands on top of the chapter title — which is exactly what the screenshot showed.
   ★ SIDE BY SIDE COSTS NO EXTRA HEIGHT, so the whole problem is WIDTH, and width is solved by
   making the pair smaller rather than by letting it fall over. MEASURED at 390px: the default
   0.68rem type put the two pills at roughly 350px inside a 351px column — over the edge on any
   rounding. The narrow-screen block at the foot takes the type and the padding down until the
   pair clears it with real margin, and the row is allowed the viewport rather than main's text
   column because it is a floating band, not a paragraph. */
.traction-row {
  position: absolute;
  top: calc(var(--header-clearance) + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;                 /* above main's own canvas + the aperture's bleed, below the chapter head (12) */
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  /* the viewport less a small gutter — a floating band, not a paragraph, so it is not bound to
     main's 5% text column. Every pixel here is one the pair does not have to shrink out of. */
  max-width: calc(100vw - 1rem);
}
/* Both pills may give ground so the ROW never has to. Without `min-width: 0` a flex child with
   `white-space: nowrap` refuses to shrink below its text and pushes the row past its own
   max-width instead — which is an overflow rather than a fit. */
.traction-row > * { min-width: 0; }

.traction-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;

  background: var(--glass-bg);
  /* ★ THE GOLD FRAME IS THE PILL'S OWN, NOT THE CTA'S (operator 2026-09-11: "why they so
     different... change the tracking one to look like the Open account one"). The two used to
     differ by three declarations — a dim `--glass-border` (red at 0.15 alpha) against
     `--glass-border-active` (gold at 0.55), a 0.18 bloom against 0.28, and quiet ink against
     gold — so the pair read as a component and an afterthought sitting beside it.
     ⚠ THE TREATMENT WAS PROMOTED UP RATHER THAN COPIED DOWN (R3b). The obvious fix is to paste
     the CTA's three lines onto the tracker, which leaves the same values written twice and two
     places to change them. They live HERE now, and `.traction-cta` states only what makes it a
     CONTROL — the three declarations it used to restate are DELETED from it. */
  border: 1px solid var(--glass-border-active);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.28);
  backdrop-filter: none;      /* #218 — no filter on anything that can end up in a fixed/sticky ancestor's paint path */

  font-family: 'Rajdhani', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent-gold);
  white-space: nowrap;
  pointer-events: none;       /* decoration, not a control — nothing to tap */
}

.traction-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-gold);
  box-shadow: 0 0 6px var(--accent-gold);
  flex-shrink: 0;
}

/* The live numbers, in the same gold the frame and the CTA now wear — one ink across the band.
   It was `--text-primary` (near-white), which is the other half of why the two pills read as
   different components rather than a pair. */
#traction-pill-text {
  color: var(--accent-gold);
}

/* ── THE CALL TO ACTION — the same pill, and the ONLY thing it adds is that it is a CONTROL ───
   Both classes sit on one element, so the LOOK is stated once above and this states nothing about
   colour, border or bloom any more: those three were moved up to `.traction-pill` when the two
   pills were made to match, and restating them here would be the same values in two places.
   What remains is behaviour — it takes taps, it reacts, and it keeps its sentence on one line.
   ⚠ `pointer-events: auto` UNDOES the pill's own `none` and must stay. The tracker is decoration
   and deliberately not tappable; this is a link, and inheriting that rule would render a button
   that looks pressable and is not — the worst of both. */
.traction-cta {
  pointer-events: auto;
  text-decoration: none;
  cursor: pointer;
  /* ONE LINE, ALWAYS. Letting this sentence wrap inside its own pill was the other way to make
     the pair fit, and it is the wrong one: it makes the CTA two lines tall while the tracker
     stays one, so the row grows into the same reserve a stacked row did. The pair shrinks
     instead — see the narrow-screen block below. */
  white-space: nowrap;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.traction-cta:active { box-shadow: 0 0 20px rgba(212, 175, 55, 0.45); }

/* ── THE VISIBLE DISCLOSURE (operator 2026-09-11, asked for after it was raised) ─────────────
   `rel="sponsored"` on the link is MACHINE-readable and a visitor never sees it. This is the
   human half: SFTi is paid when somebody opens an account through that link, and a reader is
   entitled to know that BEFORE they tap rather than after. The FTC's test is "clear and
   conspicuous, close to the endorsement" — so it rides INSIDE the pill, not in a footer nobody
   scrolls to and not behind a tooltip nobody opens.
   ★ IT IS DIM AND SMALL, WHICH IS THE POINT AND NOT AN EVASION: it has to be legible without
   competing with the call to action for the same glance. `--text-dim` against the gold is the
   same relationship `.sim-note` already has to `.sim-label` on the calculator.
   ⚠ MEASURED BEFORE IT WAS ADDED. The pair had +91px of margin at 390px and this costs ~35px, so
   the row still clears on the narrowest phone the breakpoints cover — a disclosure that pushed
   the band back into wrapping would have undone the fix above it. */
.traction-ref {
  margin-left: 0.45em;
  color: var(--text-dim);
  font-size: 0.85em;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.traction-ref::before { content: '·'; margin-right: 0.45em; }

/* The hover still READS as a hover now that the resting state is already gold: the border goes
   from the deck's 0.55-alpha gold to SOLID and the bloom from 0.28 to 0.45. `color` is no longer
   listed because nothing changes it — the pill is gold at rest, so a hover that re-declared the
   same ink would be a transition to where it already is. */
@media (hover: hover) and (pointer: fine) {
  .traction-cta:hover {
    border-color: var(--accent-gold);
    box-shadow: 0 0 22px rgba(212, 175, 55, 0.45);
  }
}

/* ── THE NARROW-SCREEN FIT — the block that keeps the pair on ONE line ───────────────────────
   MEASURED against a 390px phone, where the whole problem lives. At the default 0.68rem the two
   pills come to ~350px inside a ~351px column: technically fitting, actually wrapping, because
   nothing in a layout is ever exact. Taking the type to 0.58rem and the padding to 0.6rem brings
   the pair to roughly 285px against ~380px available — margin a rounding error cannot eat.
   ⚠ THE TYPE SHRINKS AND THE ROW DOES NOT FALL OVER, which is the trade this band is making: a
   slightly smaller pill is legible, a pill sitting on top of the chapter title is not. */
@media (max-width: 560px) {
  .traction-row { gap: 0.3rem; }
  .traction-pill { font-size: 0.58rem; padding: 0.35rem 0.6rem; gap: 0.35rem; letter-spacing: 0.04em; }
  .traction-pill-dot { width: 5px; height: 5px; }
}
/* The last stand before anything could clip: on a very narrow phone the CTA is allowed to lose
   its trailing word rather than the row its shape. `text-overflow` needs `overflow: hidden`, and
   a truncated call to action still reads as one. */
@media (max-width: 360px) {
  .traction-pill { font-size: 0.54rem; padding: 0.3rem 0.5rem; }
  .traction-cta { overflow: hidden; text-overflow: ellipsis; }
}

@media (min-width: 769px) {
  .traction-pill { font-size: 0.74rem; padding: 0.45rem 1.1rem; }
}