/* breakmyloop.com account sheet and header button (bml-acct.js), in the homepage's own
   glass: Sora controls, Source Sans reading, navy ink, the gold action. */
.bml-acct-btn{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 14px 0 12px;border:0;border-radius:15px;
  font:600 14px/1 "Sora",system-ui,sans-serif;letter-spacing:-.01em;color:#0E1F3D;cursor:pointer;white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.55));
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.65),inset 0 -1px 0 rgba(14,31,61,.08),0 6px 14px -8px rgba(14,31,61,.3);
  transition:transform .35s cubic-bezier(.34,1.35,.64,1)}
.bml-acct-btn svg{width:19px;height:19px;flex:none}
.bml-acct-btn.in{color:#fff;background:linear-gradient(180deg,#30569F,#17356B);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -10px rgba(23,53,107,.7)}
.bml-acct-btn:active{transform:scale(.97)}
.bml-acct-btn:focus-visible{outline:3px solid #2A5BD7;outline-offset:2px}
/* the header is full on a tablet: the button keeps its icon there and its word on wider screens */
@media (max-width:1180px){.bml-acct-btn{width:44px;padding:0;justify-content:center}.bml-acct-btn span{display:none}}
#hdr .hcta{white-space:nowrap}

/* while the catalogue shows a full-screen view (camera scanner, question paper), the floating header steps aside */
html.bml-full #hdr{visibility:hidden}

.bmla{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:16px;
  font:400 16px/1.5 "Source Sans 3",system-ui,sans-serif;color:#0E1F3D}
.bmla[hidden]{display:none}
.bmla-scrim{position:absolute;inset:0;background:rgba(8,16,34,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.bmla-card{position:relative;width:min(440px,100%);max-height:calc(100dvh - 32px);overflow:auto;border-radius:26px;padding:28px 24px 22px;
  background:linear-gradient(180deg,#fff,#FAF8F4);box-shadow:0 30px 80px -20px rgba(8,16,34,.55),inset 0 1px 0 #fff;
  animation:bmlaIn .32s cubic-bezier(.2,.8,.2,1)}
@keyframes bmlaIn{from{transform:translateY(14px) scale(.98);opacity:0}}
@media (prefers-reduced-motion:reduce){.bmla-card{animation:none}}
.bmla-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(14,31,61,.06);
  color:#0E1F3D;font-size:22px;line-height:1;cursor:pointer}
.bmla.locked .bmla-x{display:none}
.bmla-k{margin:0 0 6px;font:600 11.5px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#2A5BD7}
.bmla h2{margin:0 0 6px;font:700 24px/1.15 "Sora",system-ui,sans-serif;letter-spacing:-.025em}
.bmla-s{margin:0 0 18px;color:#5B6B85;font-size:15px}
.bmla-g{min-height:44px;display:flex;justify-content:center}
.bmla-or{display:flex;align-items:center;gap:10px;margin:16px 0 10px;color:#8592A8;font-size:12.5px}
.bmla-or::before,.bmla-or::after{content:"";flex:1;height:1px;background:#E4DFD4}
.bmla label{display:block;margin:0 0 12px;font:600 13px/1.2 "Sora",system-ui,sans-serif;color:#2B3A55}
.bmla input{display:block;width:100%;margin-top:6px;height:48px;padding:0 14px;border-radius:13px;border:1.5px solid #E1DACB;background:#fff;
  font:500 16px/1 "Source Sans 3",system-ui,sans-serif;color:#0E1F3D}
.bmla input:focus{outline:none;border-color:#2A5BD7;box-shadow:0 0 0 4px rgba(42,91,215,.14)}
.bmla-otp{letter-spacing:.5em;text-align:center;font-family:"IBM Plex Mono",monospace!important;font-size:22px!important}
.bmla-pw{position:relative;display:block}
.bmla-pw input{padding-right:70px}
.bmla-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);margin-top:3px;height:36px;padding:0 10px;border:0;border-radius:10px;
  background:rgba(14,31,61,.06);font:600 12px/1 "Sora",system-ui,sans-serif;color:#17356B;cursor:pointer}
.bmla-go{width:100%;height:50px;margin-top:6px;border:0;border-radius:15px;cursor:pointer;font:700 15px/1 "Sora",system-ui,sans-serif;color:#0E1F3D;
  background:linear-gradient(180deg,#FFD65A,#F2B516);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -2px 0 rgba(150,100,0,.22),0 10px 22px -10px rgba(242,181,22,.85)}
.bmla-go:disabled{opacity:.6;cursor:default}
.bmla-note{min-height:20px;margin:2px 0 8px;font-size:14px;color:#5B6B85}
.bmla-note.err{color:#B3261E}
.bmla-note.ok{color:#146c3b}
.bmla-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:14px}
.bmla-links button{border:0;background:none;padding:6px 0;font:600 14px/1.2 "Source Sans 3",system-ui,sans-serif;color:#2A5BD7;cursor:pointer}
.bmla-links button:disabled{color:#8592A8}
html.bml-acct-open{overflow:hidden}