/* The size picker, redesigned (founder, 2026-11-02: "improve the design of the tiers section"). Over rules.css: a quiet label in
   sentence case instead of the all-caps SIZE, a track with a raised thumb that slides to the picked size (tier.js places it), each
   size's dollars in the lead with Open (a gain dot) or Coming soon under it. Tokens only (BRAND 1 to 4). */
.size-pick { display: inline-flex; align-items: center; gap: var(--s-3); padding: 0; background: none; box-shadow: none; border-radius: 0; }
.size-pick .sp-lab { padding: 0; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; font-variation-settings: normal; color: var(--ink-2); }
.size-pick .sp-track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: var(--s-1);
  border-radius: var(--r-pill); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--rule); }
.size-pick .sp-thumb { position: absolute; top: var(--s-1); bottom: var(--s-1); left: 0; width: 0; border-radius: var(--r-pill);
  background: var(--bg); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--rule-strong); }
.size-pick.ready .sp-thumb { transition: translate var(--t-state) var(--ease-out), width var(--t-state) var(--ease-out); }
.size-pick .sp-opt { position: relative; z-index: 1; min-width: 112px; min-height: 48px; padding: 6px var(--s-4); gap: 3px; background: none; color: var(--ink-2); }
.size-pick .sp-amt { font-size: 16px; font-weight: 650; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: proportional-nums; }
.size-pick .sp-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 560; line-height: 1.1; color: var(--muted); }
.size-pick .sp-opt:not(.is-soon) .sp-tag { color: var(--gain-text); }
.size-pick .sp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gain); }
.size-pick .sp-opt.is-soon .sp-amt { color: var(--muted); }
.size-pick .sp-opt[aria-checked="true"] { background: none; color: var(--ink); }
.size-pick .sp-opt[aria-checked="true"] .sp-amt { color: var(--ink); }
.size-pick .sp-opt[aria-checked="true"].is-soon .sp-tag { color: var(--ink-2); }
@media (hover: hover) {
  .size-pick .sp-opt[aria-checked="false"]:hover { background: none; }
  .size-pick .sp-opt[aria-checked="false"]:hover .sp-amt { color: var(--ink); }
}
.size-pick .sp-opt:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* in the top bar (variant B) it is shorter, to sit inside the bar */
.nav .size-pick .sp-opt { min-height: 40px; padding-block: 3px; gap: 1px; }
.nav .size-pick .sp-amt { font-size: 15px; }
/* a phone: the label sits over the track (founder, 2026-11-02: "no mention of that it's the size on mobile"), the track across the column */
@media (max-width: 1023.98px) {
  .tp-phone .size-pick { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); width: 100%; }
  .tp-phone .size-pick .sp-lab { display: block; align-self: flex-start; font-size: 13px; }   /* rules.css hides it below 1024 */
  .tp-phone .size-pick .sp-track { flex: 1 1 auto; }
  .tp-phone .size-pick .sp-opt { min-width: 0; padding-inline: var(--s-2); }
}
@media (prefers-reduced-motion: reduce) { .size-pick.ready .sp-thumb { transition: none; } }

/* The label, two redesigns (founder, 2026-11-02: "redesign the arlo size text on mobile and desktop so it's more cohesive with the
   design while illustrating the point"). ab-picked keeps the plain words; main.lab-card and main.lab-split draw these. */
.size-pick .sp-chip, .size-pick .sp-split { display: none; }
.size-pick .sp-split b { font-weight: 650; font-variant-numeric: proportional-nums; }
.size-pick .sp-tr { color: var(--trader-text); }
.size-pick .sp-bk { color: var(--backer-text); }

/* card: the Arlo card in small, coral over indigo, before the words (the card above it on a phone, beside it on a desktop) */
.lab-card .size-pick .sp-lab { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); }
.lab-card .size-pick .sp-chip { display: block; flex: none; width: 20px; height: 14px; border-radius: 4px;
  background: linear-gradient(to bottom, var(--coral) 0 38%, var(--indigo) 38% 100%); box-shadow: inset 0 0 0 1px var(--rule-strong); }

/* split: "Arlo size" over the track, and what each side puts in for the picked size beside it, in the side's colour */
.lab-split .size-pick { flex-direction: column; align-items: stretch; gap: var(--s-2); }
.lab-split .size-pick .sp-lab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding-inline: var(--s-2); color: var(--ink); }
.lab-split .size-pick .sp-split { display: inline; font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 1023.98px) {
  .lab-split .tp-phone .size-pick .sp-lab { align-self: stretch; padding-inline: var(--s-1); }
  .lab-card .tp-phone .size-pick .sp-lab { display: inline-flex; }
}