/* ---- the Build menu keeps one size: category tabs on top; then one slim row with the kit's shelves (the .elpals active pills)
     on the left and the ordinary build tools on the right; then a card area of fixed height */
  #build .bb-sub { display: flex; align-items: center; gap: 10px; min-height: 36px; min-width: 0; }
  #build .bb-sub[hidden] { display: none; }
  #build .bb-sub #elshelves { flex: 1 1 auto; min-width: 0; padding: 0; flex-wrap: nowrap; gap: 10px; }
  #build .bb-sub #elshelves { overflow: hidden; }
  #build .bb-sub #elshelves .elpals { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #build .bb-sub #elshelves .elpals.ovf { mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }
  #build .bb-sub #elshelves .elpals::-webkit-scrollbar { display: none; }
  #build .bb-sub #elshelves .elpals > button { flex: none; max-width: 170px; padding-inline: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #build .bb-sub #elshelves .elhint { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
  #build .bb-sub #elshelves[hidden] + .bb-tools { margin-left: auto; }
  #build .bb-tools { flex: none; display: inline-flex; align-items: center; gap: 10px; margin-left: auto; overflow: visible; }
  body.islands #build .bb-top { flex-wrap: wrap; row-gap: 8px; } body.islands #build .bb-top .bb-tools { margin-left: auto; margin-right: 52px; gap: 8px; } body.islands #build .bb-top #cat-info { display: none; }
  body.islands #build .bb-sub #elshelves { flex: 1 1 auto; min-width: 0; }
  #build .cardwrap { height: 170px; }
  #build.hm .cardwrap { height: auto; } #build.hm .cardcol { gap: 0; } #build.hm #cards { padding-bottom: 4px; } #build.hm .cardrail.off { display: none; }
  #build .cardcol { position: relative; justify-content: center; }
  #build .cardcol #cards { align-items: center; }
  #build #cards-note { position: absolute; inset: 0 0 18px; display: grid; place-items: center; padding: 0 12px; }
  #build #cards-note[hidden] { display: none; }
  #build .kcard.jig { animation: kjig 0.32s ease-in-out infinite alternate; animation-delay: var(--jd, 0s); }
  @keyframes kjig { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
  #build .kcard .kx { position: absolute; left: -5px; top: -5px; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; font: 900 13px var(--ui); color: #ffffff; background: #e03131; border: 2.5px solid #131c5c; border-radius: 50%; cursor: pointer; }
  #cards .card.jig[aria-pressed="true"] { outline: 3px solid #ffd43b; outline-offset: 2px; animation: none; }
  #build .bb-sub #isl-ltools .islfree { margin-left: 6px; }
  #elshelves .elkedit { flex: none; height: 30px; padding: 0 12px; font: 800 13px var(--ui); color: #131c5c; white-space: nowrap; background: #ffffff; border: 2px solid #131c5c; border-radius: 10px; cursor: pointer; }
  #elshelves .elkbar { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; }
  #elshelves .elkbar input { min-width: 0; height: 32px; padding: 0 10px; font: 700 14px var(--ui); color: #131c5c; background: #ffffff; border: 2px solid #131c5c; border-radius: 10px; }
  #elshelves .elkbar #elkem { width: 44px; flex: none; text-align: center; padding: 0; font-size: 18px; } #elshelves .elkbar #elkname { flex: 1 1 120px; } #elshelves .elkbar #elkadd { flex: 2 1 160px; }
  #elshelves .elkbar button { flex: none; width: 36px; height: 32px; padding: 0; font: 900 16px var(--ui); background: #ffffff; border: 2px solid #131c5c; border-radius: 10px; cursor: pointer; } #elshelves .elkbar button.go { color: #ffffff; background: #2f9e44; }
  #build #cards-cap { position: absolute; left: 10px; right: 10px; bottom: 0; color: #ffffff; font: 700 12.5px/1.3 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } #build #cards-cap b { color: #ffe27a; }
  #build #cards-cap[hidden], #build .cardcol:has(#cards-rail:not(.off)) #cards-cap { display: none; }
  #build #cards-note .elkgen { display: flex; gap: 8px; width: min(460px, 100%); }
  #build #cards-note .elkgen input { flex: 1; min-width: 0; padding: 10px 14px; font: 600 15px var(--ui); color: #131c5c; background: #ffffff; border: 2.5px solid #131c5c; border-radius: 12px; }
  #build #cards-note .elkgen button.go { padding: 9px 16px; font: 800 14px var(--ui); color: #fff; background: linear-gradient(#3ee27a, var(--go)); border: 2.5px solid var(--go-lo); border-radius: 12px; box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 3px 0 var(--go-lo); text-shadow: 0 1px 0 rgba(0,0,0,.25); cursor: pointer; white-space: nowrap; }
  #build #cards-note .elkgen button.go:disabled { opacity: .6; cursor: default; }
  @media (max-width: 640px) {
    #build .cardwrap { height: 150px; }
    #build .bb-sub { flex-wrap: wrap; row-gap: 6px; }
    #build .bb-sub #elshelves { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
    #build .bb-sub #elshelves .elhint { display: none; }
    #build .bb-tools { flex: 1 1 100%; flex-wrap: wrap; gap: 6px; margin-left: 0; }   /* on a phone the tools take their own line and wrap rather than spill past the edge */
  }
  #elshelves[hidden] { display: none; }
  /* an empty My kit: the World page's .gdesc describe box + .go button, right on the shelf */
  #elshelves .elkgen { display: flex; gap: 6px; flex: 1 1 260px; min-width: 0; max-width: 460px; }
  #elshelves .elkgen input { flex: 1; min-width: 0; padding: 8px 12px; font: 600 14px var(--ui); color: #131c5c; background: #ffffff; border: 2.5px solid #131c5c; border-radius: 12px; }
  #elshelves .elkgen button.go { padding: 7px 14px; font: 800 13px var(--ui); color: #fff; background: linear-gradient(#3ee27a, var(--go)); border: 2.5px solid var(--go-lo); border-radius: 12px; box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 3px 0 var(--go-lo); text-shadow: 0 1px 0 rgba(0,0,0,.25); cursor: pointer; white-space: nowrap; }
  #elshelves .elkgen button.go:disabled { opacity: .6; cursor: default; }
  #elshelves .elpals { display: flex; flex-wrap: wrap; gap: 6px; }
  #elshelves .elpals button { padding: 6px 12px; font: 800 13px var(--ui); color: #ffffff; background: rgba(19, 28, 92, 0.42); border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 999px; cursor: pointer; }
  #elshelves .elpals button[aria-pressed="true"] { color: #131c5c; background: #ffd43b; border-color: #131c5c; box-shadow: 0 2px 0 #131c5c; }
  #elshelves .elhint { flex: 1 1 220px; min-width: 0; color: #ffffff; font: 700 12.5px/1.3 var(--ui); }
  #elshelves .elhint b { color: #ffe27a; }
  #cat-info .elpals button { padding: 3px 9px; font: 800 12px var(--ui); color: #33407a; background: #ffffff; border: 2px solid #c5cbe8; border-radius: 999px; }
  #cat-info .elpals button[aria-pressed="true"] { color: #ffffff; background: #4553c9; border-color: #131c5c; }