/* fix 3 C2 "Have a code?" (switch fix3_home; board CODE.png): the header pop-up and every copy of the code box (the phone
   menu, the old site footer). Loaded on every page by fix3_head() while the switch is on; rules only reach forms marked
   .f3c, which only exist then. The pop-up's glass is the header pill's own (assets/fix3/glass.css) and is not restyled
   here: only its size, and what sits inside it. No black outline: inside glass the focus is a soft inner ring. */

html body .v4-pop.v4-pop-code{width:300px;padding:12px;border-radius:22px}

form.f3c{display:flex;flex-direction:column;gap:8px;margin:0}
.f3c .h5-code-l{display:block;padding:2px 4px 0;font:600 15px/1.3 var(--text,'Instrument Sans',system-ui,sans-serif);color:inherit}
html body .f3c .h5-code-row{display:flex;align-items:center;gap:8px;box-sizing:border-box;height:48px;margin:0;padding:4px 4px 4px 16px;
  border:0;border-radius:999px;background:rgba(255,255,255,.88);box-shadow:none}
html body .f3c .h5-code-row:focus-within{box-shadow:inset 0 0 0 2px rgba(14,20,23,.18)}
html body .f3c .h5-code-row input{flex:1;min-width:0;width:auto;height:40px;margin:0;padding:0;border:0;border-radius:0;background:none;
  outline:none!important;box-shadow:none!important;
  font:500 16px/1 var(--text,'Instrument Sans',system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:#0E1417}
html body .f3c .h5-code-row input::placeholder{color:rgba(14,20,23,.42);letter-spacing:.06em;text-transform:none}
html body .f3c .h5-code-row button{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:0;margin:0;padding:0;
  border:0;border-radius:50%;background:#0E1417;color:#fff!important;cursor:pointer;transition:opacity .15s}
html body .f3c .h5-code-row button[disabled]{opacity:.25;cursor:default}
html body .f3c .h5-code-row button:focus-visible{outline:none!important;box-shadow:0 0 0 3px rgba(14,20,23,.18)}
.f3c-help{margin:0;padding:0 4px 2px;font:400 12px/1.4 var(--text,'Instrument Sans',system-ui,sans-serif);color:inherit;opacity:.8}

/* the phone menu: the same box, first thing in it */
html body .v4-drawer .f3c .h5-code-row{background:rgba(255,255,255,.88)}

/* the old site footer (no glass under it: paper) */
html body .bf-foot-code form.f3c{display:flex;width:260px;max-width:100%;margin-top:8px}
html body .bf-foot-code .f3c .h5-code-row{background:var(--paper-4,#EEF2F4)}
html body .bf-foot-code .f3c .h5-code-row input{width:auto;height:40px;padding:0;border:0}
html body .bf-foot-code .f3c .h5-code-row button{height:40px;padding:0}
.bf-foot-code .f3c-help{color:var(--sub,#5C6B75);opacity:1}

@media (prefers-reduced-motion:reduce){html body .f3c .h5-code-row button{transition:none}}

/* fix 4 Part 4.3 (CODE.png): while the header sits on a field, the clear glass shows the field through it, so the
   title and the help line are white like the nav around them; on paper (and wherever the glass falls back to an
   opaque white fill) they stay ink. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media not (prefers-reduced-transparency:reduce){
    /* the open pop-up is moved to <body> (v4 pop-ups), so the header's state is read with :has() */
    html body:has(:is(.v4-hdr.is-top,.bf-nav-shell.header--on-field)) .v4-pop-code .f3c :is(.h5-code-l,.f3c-help){color:#fff}
    html body:has(:is(.v4-hdr.is-top,.bf-nav-shell.header--on-field)) .v4-pop-code .f3c .f3c-help{opacity:.86}
  }
}