/* The size picker (kit/rules.js), the part for the founder's rule of 2026-10-29. Tokens only (BRAND 1 to 4). */

/* ── the size picker: a 44px pill of three options, the chosen one in ink; Coming soon sizes stay readable, tagged ── */
.size-pick { display: inline-flex; align-items: stretch; gap: 2px; padding: 2px; border-radius: var(--r-pill); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule-strong); font-family: var(--font); max-width: 100%; }
.size-pick .sp-lab { align-self: center; padding: 0 var(--s-2) 0 var(--s-3); font-size: 12px; font-weight: 640; font-variation-settings: 'wdth' 85;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sp-opt { display: grid; align-content: center; justify-items: center; gap: 1px; min-height: 40px; padding: 2px var(--s-3); border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink); font: inherit; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out), transform var(--t-press) var(--ease-out); }
.sp-opt:active { transform: scale(0.97); }
.sp-opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sp-name { font-size: 13.5px; font-weight: 600; line-height: 1.1; font-variant-numeric: proportional-nums; }
.sp-short { display: none; }
.sp-tag { font-size: 10.5px; font-weight: 560; line-height: 1.1; color: var(--gain-text); }
.sp-opt.is-soon .sp-name { color: var(--muted); }
.sp-opt.is-soon .sp-tag { color: var(--muted); }
.sp-opt[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.sp-opt[aria-checked="true"] .sp-name, .sp-opt[aria-checked="true"] .sp-tag { color: var(--bg); }
@media (hover: hover) { .sp-opt[aria-checked="false"]:hover { background: var(--surface-2); } }
@media (max-width: 479.98px) {
  .size-pick .sp-lab { display: none; }
  .sp-long { display: none; } .sp-short { display: inline; }
  .sp-opt { padding: 2px var(--s-2); flex: 1 1 0; }
  .size-pick { width: 100%; }
}
/* the float: fixed at the foot of the screen, shown (.on) while a size's figures are on screen and no inline picker is */
.size-pick--float { position: fixed; z-index: var(--z-sticky); left: 50%; bottom: calc(var(--s-4) + env(safe-area-inset-bottom) + var(--size-pick-lift, 0px));
  width: auto; max-width: calc(100% - 2 * var(--s-4)); box-shadow: inset 0 0 0 1px var(--rule-strong), var(--shadow-soft);
  translate: -50% calc(100% + var(--s-6)); opacity: 0; pointer-events: none; transition: translate var(--t-state) var(--ease-out), opacity var(--t-state) var(--ease-out); }
.size-pick--float.on { translate: -50% 0; opacity: 1; pointer-events: auto; }
@media (max-width: 479.98px) { .size-pick--float { width: calc(100% - 2 * var(--s-4)); } }
@media (prefers-reduced-motion: reduce) { .size-pick--float { transition: none; } }

/* Trade and Back while a Coming soon size is picked: a disabled pill that says why (BRAND 4) */
[data-join].is-soon { background: var(--surface-2) !important; color: var(--muted) !important; box-shadow: inset 0 0 0 1px var(--rule-strong) !important;
  cursor: not-allowed; pointer-events: auto; }