/* ==========================================================================
   fix 4 Part 7.1: ONE segmented-control style for the whole site (bonfium-fix4/PROMPT.md 7.1, AGENT-BRIEF rule 4).
   Loaded on every page (app/fix3.php fix3_head()).

   The control:  <div class="f4-seg" role="radiogroup" aria-label="…">
                   <button type="button" role="radio" aria-checked="true">…</button> …
                 </div>
   The track is #EEF1F4, radius 999, padding 4; the selected item is white with the soft shadow; no dark outline on
   the selected item (keyboard focus gets a light ring instead of the site's 2 px ink outline).
   Also accepted as "selected": aria-pressed, aria-selected, aria-current, .on, and input:checked + span (labels).
   Modifiers: .f4-seg--full (fills its row, equal items), .f4-seg--sm (40 → 36 px items).

   Below it: overrides that restyle the segmented controls that already exist (New trade, the sell form, the
   badge tools, the old pages). Nothing in the untouched home sections (the hero and its price panel, the listing
   stack, What moves, the vault, the 15 000 band) is restyled here.
   ========================================================================== */

:root{
  --f4-seg-track:#EEF1F4;
  --f4-seg-on:#FFFFFF;
  --f4-seg-shadow:0 1px 2px rgba(14,20,23,.08),0 4px 10px -4px rgba(14,20,23,.18);
  --f4-seg-ink:#0E1417;
  --f4-seg-off:#4B565C;
  --f4-seg-ring:0 0 0 2px rgba(14,20,23,.16);
}

/* ---------- the control ---------- */
.f4-seg{display:inline-flex;align-items:stretch;gap:2px;max-width:100%;box-sizing:border-box;margin:0;padding:4px;border:0;border-radius:999px;
  background:var(--f4-seg-track);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.f4-seg>button,.f4-seg>a,.f4-seg>label>span{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  box-sizing:border-box;min-height:40px;margin:0;padding:0 18px;border:0;border-radius:999px;background:transparent;box-shadow:none;outline:none;
  font:500 15px/1.15 var(--text,'Instrument Sans',system-ui,sans-serif);letter-spacing:0;color:var(--f4-seg-off);text-align:center;text-decoration:none;
  white-space:nowrap;cursor:pointer;transition:background-color .16s ease,color .16s ease,box-shadow .16s ease}
.f4-seg>label{position:relative;display:flex}
.f4-seg>label>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.f4-seg>:is(button,a):hover:not([aria-checked="true"],[aria-pressed="true"],[aria-selected="true"],[aria-current="page"],[aria-current="true"],.on,:disabled){color:var(--f4-seg-ink)}
.f4-seg>:is([aria-checked="true"],[aria-pressed="true"],[aria-selected="true"],[aria-current="page"],[aria-current="true"],.on),
.f4-seg>label>input:checked+span{background:var(--f4-seg-on);color:var(--f4-seg-ink);font-weight:600;box-shadow:var(--f4-seg-shadow)}
.f4-seg>:is(button,a):focus-visible,.f4-seg>label>input:focus-visible+span{outline:none;box-shadow:var(--f4-seg-ring)}
.f4-seg>:is([aria-checked="true"],[aria-pressed="true"],[aria-selected="true"],[aria-current="page"],[aria-current="true"],.on):focus-visible,
.f4-seg>label>input:checked:focus-visible+span{box-shadow:var(--f4-seg-shadow),var(--f4-seg-ring)}
.f4-seg>:is(button,a):disabled,.f4-seg>[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.f4-seg--full{display:flex;width:100%}
.f4-seg--full>*{flex:1 1 0;min-width:0}
.f4-seg--sm>button,.f4-seg--sm>a,.f4-seg--sm>label>span{min-height:36px;padding:0 14px;font-size:14px}
@media (max-width:560px){
  .f4-seg>button,.f4-seg>a,.f4-seg>label>span{padding:0 14px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .f4-seg>button,.f4-seg>a,.f4-seg>label>span{transition:none}
}

/* ==========================================================================
   The segmented controls that already exist, in the same style.
   Selectors carry one extra element (html) so they win over the page's own rules whatever the load order.
   ========================================================================== */

/* the selected item everywhere: white, the soft shadow, never an ink outline */
html .v4 .v4-payer button[aria-checked="true"],
html .v4 .v4-sides button[aria-checked="true"],
html .v3 .seg.on-paper :is([aria-current="page"],[aria-pressed="true"],[aria-checked="true"]),
html .v3 .seg.on-field :is([aria-current="page"],[aria-pressed="true"],[aria-checked="true"]),
html .v4 .bd2-seg input:checked+span,
html .nt-seg button[aria-checked="true"],
html .bt-seg input:checked+span,
html .bf-seg :is([aria-pressed="true"],[aria-current="true"]),
html .bld-seg button.on,
html .v5h-seg button.on,
html .f3b-seg input:checked+span{background:var(--f4-seg-on);color:var(--f4-seg-ink);box-shadow:var(--f4-seg-shadow);outline:none}

/* the paper tracks: #EEF1F4, radius 999, padding 4 */
html .v4 .v4-payer,
html .v3 .seg.on-paper,
html .v4 .bd2-seg,
html .nt-seg,
html .bt-seg,
html .bf-seg,
html .bld-seg,
html .v5h-seg{background:var(--f4-seg-track);border:0;border-radius:999px;padding:4px;box-shadow:none}
html .bld-seg button{border-radius:999px}
html .bld-seg-2{grid-template-columns:1fr 1fr}

/* unselected items: the same quiet ink, 500 */
html .v4 .v4-payer button:not([aria-checked="true"]),
html .v3 .seg.on-paper :is(a,button):not([aria-current="page"],[aria-pressed="true"],[aria-checked="true"]),
html .v4 .bd2-seg label>span,
html .nt-seg button:not([aria-checked="true"]),
html .bt-seg label>span,
html .bf-seg :is(button,a):not([aria-pressed="true"],[aria-current="true"]),
html .bld-seg button:not(.on):not(:disabled),
html .v5h-seg button:not(.on){color:var(--f4-seg-off);font-weight:500}

/* the sliding pill (v3 switchers) carries the same shadow */
html .v3 .seg.on-paper .slider,html .v3 .seg.on-field .slider{box-shadow:var(--f4-seg-shadow)}
html .v3 .seg.has-slider :is([aria-current="page"],[aria-pressed="true"],[aria-checked="true"]){background:transparent;box-shadow:none}

/* On a field the track stays clear glass (glass and grain stay), only the selected item changes. */

/* keyboard focus: a light ring, not the site's 2 px ink outline */
html .v4 :is(.v4-payer,.v4-sides) button:focus-visible,
html .v3 .seg :is(a,button):focus-visible,
html :is(.nt-seg,.bf-seg,.bld-seg,.v5h-seg) :is(a,button):focus-visible{outline:none;box-shadow:var(--f4-seg-ring)}
html .v4 :is(.v4-payer,.v4-sides) button[aria-checked="true"]:focus-visible,
html .v3 .seg :is([aria-current="page"],[aria-pressed="true"],[aria-checked="true"]):focus-visible,
html .nt-seg button[aria-checked="true"]:focus-visible,
html .bf-seg :is([aria-pressed="true"],[aria-current="true"]):focus-visible,
html .bld-seg button.on:focus-visible,
html .v5h-seg button.on:focus-visible{box-shadow:var(--f4-seg-shadow),var(--f4-seg-ring)}
html .v4 .bd2-seg input:focus-visible+span,html .bt-seg input:focus-visible+span{outline:none;box-shadow:var(--f4-seg-ring)}
html .v4 .bd2-seg input:checked:focus-visible+span,html .bt-seg input:checked:focus-visible+span{box-shadow:var(--f4-seg-shadow),var(--f4-seg-ring)}
html .v4 .v4-sides button:not([aria-checked="true"]):focus-visible,html .v3 .seg.on-field :is(a,button):not([aria-current="page"],[aria-pressed="true"],[aria-checked="true"]):focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.55)}