/* ==========================================================================
   Layout fixes (switch layout_fixes_v4; docs/layout-fixes/PHASE0.md, decided 9 Oct 2026).
   Loaded after v4.css and glass.css only while the switch is on. Layout and CSS only.
   ========================================================================== */

/* ---------- 1, 2. the footer at the bottom and its width: assets/fix6/footer.css (fix 6 Part 1) ---------- */

/* ---------- 3. one account pill, never glass on glass ---------- */
/* at rest on a field: one clear-glass pill (the header pill recipe), the disc 4 px inside */
.v3 .v3-hdr.is-top .acct,.bf-nav-shell.bf-v4.header--on-field:not(.bf-nav-scrolled) .bf-account-button{
  background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.18);border:0}
.v3 .acct,.bf-v4 .bf-account-button{padding:4px 12px 4px 4px;height:40px}
/* inside the glass bar (scrolled) and on paper: no second pill */
.v3 .v3-hdr:not(.is-top) .acct,.bf-nav-shell.bf-v4.bf-nav-scrolled .bf-account-button,.bf-nav-shell.bf-v4:not(.header--on-field) .bf-account-button{
  background:transparent!important;box-shadow:none!important}
.v3 .v3-hdr:not(.is-top) .acct:hover,.v3 .v3-hdr:not(.is-top) .acct[aria-expanded="true"],
.bf-nav-shell.bf-v4.bf-nav-scrolled .bf-account-button:hover,.bf-nav-shell.bf-v4:not(.header--on-field) .bf-account-button:hover{background:rgba(14,20,23,.06)!important}
.v3 .v3-hdr.is-top .acct:hover,.v3 .v3-hdr.is-top .acct[aria-expanded="true"]{background:rgba(255,255,255,.12)}
/* the phone VM disc: in the scrolled bar it is the disc only, no blur of its own */
.v4-hdr:not(.is-top) .v4-me{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}

/* ---------- 4. our own form messages (assets/v4/forms.js) ---------- */
.bf-ferr{display:block;margin-top:6px;font-size:13px;line-height:1.35;color:var(--coral,#C2412A);font-weight:500}
[aria-invalid="true"]:not([type=checkbox]):not([type=radio]){box-shadow:0 0 0 1px var(--coral,#C2412A)!important;border-color:var(--coral,#C2412A)!important}
.field-in.pre:has([aria-invalid="true"]){box-shadow:0 0 0 1px var(--coral,#C2412A)!important}
/* the trade code field reads as empty until something is typed */
input[name="trade_code"]::placeholder{color:var(--sub,#5B6A74);opacity:.55}
form[data-bf-code] button[type="submit"]:disabled,form[data-bf-code] .iconbtn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- 5.3 New trade, phone: the bar sits in the form column and stops above "Got a code" ---------- */
.v4 .v4-newbar{display:none}
@media (max-width:760px){
  .v4 .v4-newform{position:relative}
  .v4 .v4-newbar{position:sticky;bottom:10px;z-index:5;display:flex;align-items:center;gap:10px;margin:8px -8px 12px;padding:10px 10px 10px 16px;border-radius:22px;
    background:rgba(255,255,255,.26);-webkit-backdrop-filter:blur(36px) saturate(1.8);backdrop-filter:blur(36px) saturate(1.8);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(14,20,23,.06),0 12px 28px -14px rgba(15,21,25,.3);color:var(--ink)}
  .v4 .v4-newbar .grow{flex:1;min-width:0}
  .v4 .v4-newbar .t1{display:block;font-weight:600;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .v4 .v4-newbar .t2{display:block;font-size:14px;color:var(--sub)}
  .v4 .v4-newbar .btn{flex:none}
}
@media (prefers-reduced-transparency:reduce){.v4 .v4-newbar{background:rgba(255,255,255,.94);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- 5.4 Money, desktop: the two cards line up ---------- */
.v4.money-pg .money-grid{align-items:stretch}
.v4.money-pg .money-grid>*{align-self:stretch}

/* ---------- 5.1 trade rows: the item's photo or its first letter, not a "?" ---------- */
.v4 .trow .av.ph{background:var(--paper-3) center/cover no-repeat;border-radius:12px;color:transparent}
.v4 .trow .av.lt{background:var(--paper-3);color:var(--ink);font-family:var(--display);font-size:17px}