/* Molecule builder page. Pages with body.origins already override the quiz's fit mode (origins.css). */
.bhead{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:4px 0 10px}
.bhead h1{margin:0; font-size:clamp(20px,3vw,26px)}
.bhead input{font:inherit; font-size:15px; padding:8px 12px; border:1.5px solid var(--line-strong); border-radius:9px; background:var(--surface); color:var(--ink); min-width:230px}
.bhead .btns{display:flex; gap:8px; margin-left:auto}
.bbox{padding:6px}
#bsvg{width:100%; height:auto; aspect-ratio:900/560; display:block; touch-action:none; user-select:none; -webkit-user-select:none; background:var(--surface); border-radius:10px}
#bsvg .bond line{stroke-width:calc(5px*var(--g,1)); stroke-linecap:round}
#bsvg .bond line.hit{stroke:transparent; stroke-width:calc(26px*var(--g,1)); cursor:pointer}
#bsvg .bond.bad line:not(.hit){stroke:#d9534f !important; stroke-dasharray:4 5; opacity:.9}
#bsvg .at{cursor:grab; outline:none}
#bsvg .at .body{stroke:var(--ink); stroke-width:1.4}
#bsvg .at .el{text-anchor:middle; font:700 calc(16px*var(--g,1)) 'Instrument Sans',sans-serif; fill:#0d1a22; pointer-events:none}
#bsvg .at .hat{stroke:var(--line-strong); stroke-width:1.2}
#bsvg .at .hstick{stroke-width:3; stroke:var(--line-strong)}
#bsvg .at .hl{text-anchor:middle; font:600 calc(10.5px*var(--g,1)) 'Instrument Sans',sans-serif; fill:#0d1a22; pointer-events:none}
#bsvg .at .open{fill:none; stroke:var(--accent); stroke-width:calc(1.8px*var(--g,1))}
#bsvg .at.sel .body{stroke:var(--accent); stroke-width:calc(4px*var(--g,1))}
#bsvg .at.cand .body{stroke:var(--accent); stroke-width:2.6; stroke-dasharray:3 3}
#bsvg .at:focus-visible .body{stroke:var(--accent); stroke-width:4}
#bsvg .at.full .body{opacity:1}
@keyframes bshake{0%,100%{transform:translateX(0)}30%{transform:translateX(-2px)}70%{transform:translateX(2px)}}
#bsvg .at.shake{animation:bshake .5s ease 1}
.bstat{display:flex; flex-wrap:wrap; gap:6px 18px; margin:10px 2px 0; font-size:14.5px; color:var(--muted)}
#bmsg{color:var(--ink); font-weight:500}
#bmsg.ok{color:var(--accent); font-weight:700}
#bmsg.warn{color:#c0392b}
.bhelp{margin:10px 2px 0; color:var(--muted); font-size:13.5px}
.bviewer .lb-card{border:0; box-shadow:none; padding:0; background:var(--surface); border-radius:10px}
.bviewer .lb-art{width:100%; margin-inline:auto}
.bbox{position:relative}
.bwin{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2}
.bconf{position:absolute; top:-30px; font-style:normal; font-weight:700; font-family:'JetBrains Mono',monospace; opacity:0; animation:bfall 2.2s ease-in forwards; text-shadow:0 0 2px var(--surface)}
@keyframes bfall{0%{opacity:1; transform:translate(0,0) rotate(0)}100%{opacity:0; transform:translate(var(--dx),560px) rotate(var(--rot))}}
@keyframes bpop{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
#bsvg.win .at .body{transform-box:fill-box; transform-origin:center; animation:bpop 1s ease-in-out 1}
#bsvg.win .bond line:not(.hit){stroke-width:7}
@media (prefers-reduced-motion:reduce){.bconf{display:none}#bsvg.win .at .body{animation:none}}
.card .mgh{margin:18px 2px 8px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.card .mgn{margin-left:6px; font-weight:400; letter-spacing:0; color:var(--muted); font-family:var(--font-mono); font-size:12px}
.mgd{margin:-4px 2px 8px; font-size:13.5px; color:var(--muted)}
#mnav{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 6px}
#mnav a{padding:4px 10px; border:1.5px solid var(--line-strong); border-radius:999px; font-size:13px; color:var(--ink); text-decoration:none; background:var(--surface)}
#mnav a span{color:var(--muted); font-family:var(--font-mono); font-size:11.5px; margin-left:3px}
#mnav a:hover,#mnav a:focus-visible{border-color:var(--accent); background:var(--accent-soft)}
.mgh{scroll-margin-top:12px}
.mgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px}
.mcard{display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; padding:10px 12px; border:1.5px solid var(--line-strong); border-radius:10px; background:var(--surface); color:var(--ink); text-decoration:none}
.mcard:hover,.mcard:focus-visible{border-color:var(--accent); background:var(--accent-soft)}
.mcard b{max-width:100%; overflow-wrap:anywhere}
.mcard small{color:var(--muted); white-space:nowrap}
@keyframes bglow{0%,100%{opacity:.55}50%{opacity:1}}
#bsvg .at .halo{fill:rgba(245,158,11,.22); stroke:#f59e0b; stroke-width:4; animation:bglow 1s ease-in-out infinite; pointer-events:none}
.bstat .clock{font-family:var(--font-mono); font-size:14px; margin-left:auto}
.bstat .bestline{font-size:12.5px}
.msort{margin-left:auto; font-size:14px; color:var(--muted)}
.msort select{font:inherit; padding:6px 8px; border:1.5px solid var(--line-strong); border-radius:8px; background:var(--surface); color:var(--ink)}
.mdone{color:var(--accent); font-weight:600}
.mdue{color:var(--bad); font-weight:600}
/* spaced review: the count of molecules due, on the dice, and the tag beside the builder's title */
.bdice{position:relative}
.mdueN{position:absolute; top:-7px; right:-7px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--bad); color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center}
.bdue{display:inline-block; vertical-align:middle; margin-left:6px; padding:2px 8px; border-radius:999px; border:1.5px solid var(--bad); color:var(--bad); font-size:12px; font-weight:700; letter-spacing:.02em}
.bdue[hidden],.mdueN[hidden]{display:none}
.bfind{display:flex; gap:8px; align-items:center}
.bpick{position:relative}
.bdice{text-decoration:none; padding:6px 9px; display:inline-flex; align-items:center; justify-content:center}
#blist{position:absolute; z-index:20; left:0; min-width:100%; width:max-content; max-width:min(440px,90vw); top:calc(100% + 4px); margin:0; padding:4px; list-style:none; max-height:min(50vh,340px); overflow:auto; background:var(--surface); color:var(--ink); border:1.5px solid var(--line-strong); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.18)}
#blist li{padding:6px 10px; border-radius:6px; cursor:pointer; font-size:15px}
#blist li.cur{font-weight:700}
#blist li:hover,#blist li.act{background:var(--accent-soft)}
/* On a laptop screen the board gets the height that is left, so the page needs no scrolling */
@media (min-width:700px){
  .bbox{display:flex; justify-content:center}
  #bsvg{min-width:360px}
}
.bhead .btns a.btn{text-decoration:none; display:inline-flex; align-items:center}
#bsvg.locked .at,#bsvg.locked .bond line.hit{cursor:default}
/* a finished or shown molecule is not dragged, so a finger on it scrolls the page (a tall board fills the phone screen) */
#bsvg.locked{touch-action:pan-y pinch-zoom}

/* Phones: a tall board with large atoms, a compact header, one row of buttons */
@media (max-width:700px){
  .bcard{padding:10px}
  .bhead{gap:8px; margin:0 0 8px}
  /* the search box cuts long names short, so the full name shows as a wrapped line right under it */
  .bhead h1{order:1; flex:1 1 100%; margin:0; font-size:16px; line-height:1.3; overflow-wrap:anywhere}
  .bfind{flex:1 1 100%; order:0}
  .bhead .btns{order:2}
  .bpick{flex:1 1 auto}
  .bdice{min-height:44px; min-width:44px}
  .bhead input{width:100%; min-width:0; box-sizing:border-box; font-size:16px; padding:10px 12px}
  .bhead .btns{margin-left:0; width:100%; flex-wrap:wrap; gap:6px}
  .bhead .btns .btn{flex:1 1 auto; min-height:44px; padding:8px 10px; font-size:14.5px; white-space:nowrap; justify-content:center}
  .bbox{padding:0}
  #bsvg{aspect-ratio:auto; border-radius:12px}
  #bsvg .at .hat{stroke-width:calc(1.2px*var(--g,1))}
  .bstat{font-size:15px; margin-top:8px}
  #bmsg{flex:1 1 100%}
  .bhelp{display:none}
  .bviewer .lb-art:has(.v3dbar){height:min(62vh,520px)}
}
.bhead .btns a.btn[hidden]{display:none}