/* Where the size picker sits, per variant (main.tp-a / tp-b / tp-c; tp-ab, the founder's pick of 2026-11-02, is A on a desktop and B on
   a phone). Tokens only (BRAND 1 to 4). The desktop picker (.tp-desk)
   shows from 1024px, the phone's (.tp-phone, a cell of the story's grid) below it. The picker itself is rules.css. */
.tp-phone { display: none; }
@media (max-width: 1023.98px) {
  .tp-desk { display: none; }
  .oh.split.sw .tp-phone { grid-area: size; display: flex; justify-content: center; }
  .oh.split.sw .tp-phone .size-pick { width: 100%; justify-content: space-between; }
  .oh.split.sw .tp-phone .sp-opt { flex: 1 1 0; }
  /* a: under the top bar, above the story */
  .oh.split.sw.tp-a .ring { grid-template-areas: "size size size size size size" "q1 q2 q3 q4 q5 q6" "card card card card card card"
    "panel panel panel panel panel panel" "acts acts acts acts acts acts"; }
  /* b: between the card and the answer it is about */
  .oh.split.sw.tp-b .ring, .oh.split.sw.tp-ab .ring { grid-template-areas: "q1 q2 q3 q4 q5 q6" "card card card card card card" "size size size size size size"
    "panel panel panel panel panel panel" "acts acts acts acts acts acts"; }
  /* c: just above Trade and Back, which it turns to Coming soon */
  .oh.split.sw.tp-c .ring { grid-template-areas: "q1 q2 q3 q4 q5 q6" "card card card card card card" "panel panel panel panel panel panel"
    "size size size size size size" "acts acts acts acts acts acts"; }
  .oh.split.sw.tp-c .acts { margin-block: 0; }
}

@media (min-width: 1024px) {
  /* a: centred under the top bar, above the questions and the card */
  .tp-a .tp-desk, .tp-ab .tp-desk { display: flex; justify-content: center; margin-bottom: var(--s-6); }
  /* b: in the middle of the top bar */
  .nav .tp-desk { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
  .nav { position: relative; }
  /* c: just above the card, the questions keeping their places beside it */
  .tp-c .mid { position: relative; }
  .tp-c .tp-desk { position: absolute; left: 50%; bottom: calc(100% + var(--s-5)); translate: -50% 0; z-index: var(--z-sticky); }
}

/* a picker that has not been drawn yet (no script) takes no room */
.tp [data-size-pick]:empty { display: none; }

/* answers wrap evenly, so no word sits alone on the last line (the $75,000 Trader answer at 1024 did) */
#back .ba p, .st-a p { text-wrap: pretty; }