/* The shared drop-down (ticket #037). Used by the staff screens and the public pages; see vsel.js.
   One look everywhere: a white box with an outline that passes 3 to 1 against white, a chevron, and a
   floating list with a tick on the chosen item. On a phone the list is a bottom sheet. Nothing here
   depends on a page's own field styles, so the box is the same on every page.
   fieldlook (5 Nov 2026): the box has a SOFT warm-grey edge (#928570, 3.2 to 1 on the page, 3.6 to 1 on white), a light warm fill (#faf5ec)
   and a 2px deep-orange edge when open or focused (#a8560a, 4.8 to 1 on the fill); never black. The same four values are the --fld-* tokens in pages.css. */
:root{--vsel-css:1}  /* the script looks for this to know the style sheet really loaded */
.vsel{position:relative;display:block;width:100%;min-width:0}
/* the real select stays in the page and holds the value; it is invisible and takes no clicks */
select.vsel-native{position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;
  min-height:0!important;margin:0!important;padding:0!important;border:0!important;opacity:0!important;pointer-events:none!important;
  appearance:none;-webkit-appearance:none;background:none!important;box-shadow:none!important}
.vsel-btn{display:block;position:relative;width:100%;max-width:100%;min-height:50px;margin:0;padding:12px 44px 12px 14px;
  font:inherit;font-size:17px;font-weight:400;line-height:1.5;color:var(--ink,#191919);text-align:left;cursor:pointer;
  background:var(--fld-fill,#faf5ec);border:1px solid var(--fld-edge,#928570);border-radius:10px;box-shadow:none;outline:0;
  transition:border-color .15s,box-shadow .15s}
.vsel-btn:hover{border-color:var(--fld-edge-hi,#7d705c)}
.vsel-btn:focus-visible,.vsel.open .vsel-btn{border-color:var(--fld-focus,#a8560a);box-shadow:0 0 0 1px var(--fld-focus,#a8560a)}
.vsel-btn:disabled{cursor:not-allowed;color:#756a5c;background:#f5efe4}
.vsel.bad .vsel-btn,.fld.bad .vsel-btn{border-color:#a3231b;box-shadow:0 0 0 1px #a3231b,0 0 0 4px rgba(163,35,27,.14)}
.vsel-val{display:flex;align-items:center;gap:10px;min-width:0;white-space:nowrap;overflow:hidden}
.vsel-val .vsel-txt{overflow:hidden;text-overflow:ellipsis;min-width:0}
.vsel-val.vsel-hint{color:#756a5c}
.vsel-flag{flex:none;width:26px;height:20px;border-radius:4px;object-fit:cover;box-shadow:0 1px 4px rgba(60,40,20,.25)}
.vsel-chev{position:absolute;right:18px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2.5px solid #6f6354;
  border-bottom:2.5px solid #6f6354;transform:rotate(45deg);transition:transform .2s;pointer-events:none}
.vsel.open .vsel-chev{transform:rotate(-135deg);margin-top:-1px}

/* the floating list: it lives in the page body while open, so no card or table can cut it off */
.vsel-pop{display:none}
.vsel-pop.show{display:block;position:fixed;z-index:1000}
.vsel-list{margin:0;padding:8px;list-style:none;overflow:auto;overscroll-behavior:contain;background:#fff;border:1px solid #d9cdbb;
  border-radius:16px;box-shadow:0 18px 50px rgba(25,25,25,.18),0 2px 8px rgba(25,25,25,.08);outline:0;
  font-family:inherit;color:var(--ink,#191919)}
.vsel-opt{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 14px;border-radius:10px;font-size:17px;font-weight:400;
  line-height:1.4;cursor:pointer;overflow-wrap:anywhere}
.vsel-opt .vsel-txt{min-width:0}
.vsel-opt:hover,.vsel-opt.act{background:var(--sand,#f8f0e4)}
.vsel-opt[aria-selected="true"]{background:var(--soft,#fdebd6);font-weight:500}
.vsel-opt[aria-disabled="true"]{color:#756a5c;cursor:not-allowed}
.vsel-opt .vsel-tick{margin-left:auto;flex:none;width:18px;height:18px;stroke:var(--ink,#191919);stroke-width:3;fill:none;
  stroke-linecap:round;stroke-linejoin:round;opacity:0}
.vsel-opt[aria-selected="true"] .vsel-tick{opacity:1}
.vsel-sep{height:1px;background:var(--line,#ecdfcc);margin:6px 8px}
.vsel-group{padding:10px 14px 4px;font-size:14px;font-weight:600;color:#5c544a}
.vsel-empty{padding:14px;font-size:17px;color:#5c544a}

.vsel-back{display:none;touch-action:none}
@media(max-width:760px){
  .vsel-back.show{display:block;position:fixed;inset:0;z-index:999;background:rgba(25,20,10,.38)}
  .vsel-pop.show.sheet{left:12px;right:12px;bottom:12px;top:auto}
  .vsel-pop.sheet .vsel-list{max-height:62vh;border-radius:24px}
  .vsel-opt{min-height:48px}
}
@media(prefers-reduced-motion:reduce){.vsel-btn,.vsel-chev{transition:none}}