/* fw-picker - inline listbox that progressively enhances a <select class='fwpick'>.
 * Palette is lifted straight from css3.css (#3b5998 link blue, #bdc7d8 input
 * border, #666 muted) so it reads as FW furniture, not a bolted-on widget.
 * NO .dark rules here on purpose: dark mode is a global filter invert, and a
 * hand-darkened panel is exactly the carveout pattern docs/dark-mode.md deleted.
 */
.fwpick-box{border:1px solid #bdc7d8;background:#fff;max-width:470px}
.fwpick-f{display:block;width:100%;border:0;border-bottom:1px solid #dfe3ee;padding:5px 6px;font-size:12px;-webkit-box-sizing:border-box;box-sizing:border-box}
.fwpick-list{max-height:266px;overflow-y:auto;-webkit-overflow-scrolling:touch;outline:0}
.fwpick-list:focus{box-shadow:inset 0 0 0 2px #dfe3ee}

.fwpick-row{position:relative;min-height:38px;padding:5px 8px 6px 52px;border-bottom:1px solid #eef0f5;cursor:pointer}
.fwpick-row:last-child{border-bottom:0}
.fwpick-row:hover{background:#f2f4f9}
.fwpick-noi{padding-left:8px}

.fwpick-sel{background:#e7ebf5}
.fwpick-sel:hover{background:#e1e6f3}
/* the marker is a border, not a fill, so a selected row still shows its thumb
   and badge colors at full strength */
.fwpick-sel:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#3b5998}

/* the frame comes from css3.css .brdr (1px #666 + 2px margin), same as the fish
   thumbs on /fish/ - so left/top are 2px short of where the thumb should land */
.fwpick-i{position:absolute;left:4px;top:3px;width:38px;height:38px;background:#fff;object-fit:contain}
.fwpick-t{font-size:12px;font-weight:bold;color:#333;padding-right:96px}
.fwpick-s{font-size:11px;color:#666;padding-right:96px}
.fwpick-b{position:absolute;right:7px;top:7px;font-size:10px;text-transform:uppercase;letter-spacing:.3px;max-width:92px;text-align:right;line-height:1.15}
.fwpick-n{font-size:11px}

.fwpick-off{opacity:.55;cursor:default}
.fwpick-off:hover{background:none}

/* mobile web (630 canvas) and the 420 app canvas: the badge gets its own line
   rather than squeezing the name into nothing */
@media (max-width:640px){
  .fwpick-box{max-width:100%}
  .fwpick-t,.fwpick-s{padding-right:0}
  .fwpick-b{position:static;display:block;text-align:left;max-width:none;margin-top:1px}
}