/* 08-oct night (Mathew): ONE look for every multi-option selector — the Board · Customers · Waitlist strip.
   White box 40 px, thin grey edge, 10 px corners; options full height, 14 px bold ink; the picked one light grey
   (var(--osz-sel-bg), no edge); hover a paler grey. Loaded last so it wins over the older per-page variants. */
:is(.w1 .w1-seg, .w1 .w1-crow.w1-segrow, .tt-seg, .py-seg, .wk-seg, .w1 .w1-costsheet .seg, .cp2-seg, .w1 .w1-pseg) {
  display:inline-flex !important; flex-wrap:nowrap !important; align-items:stretch !important; height:40px !important; box-sizing:border-box !important;
  padding:0 !important; gap:0 !important; background:#fff !important; border:1px solid #e3e7ec !important; border-radius:10px !important; overflow:hidden !important;
}
:is(.w1 .w1-seg, .w1 .w1-crow.w1-segrow, .tt-seg, .py-seg, .wk-seg, .w1 .w1-costsheet .seg, .cp2-seg, .w1 .w1-pseg) > :is(span, button, .w1-flt) {
  display:inline-flex !important; align-items:center !important; justify-content:center !important; height:auto !important; min-height:0 !important;
  margin:0 !important; padding:0 18px !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  background:none !important; color:#171a1f !important; font:700 14px Inter, system-ui, sans-serif !important; white-space:nowrap !important; transform:none !important; animation:none !important;
}
:is(.w1 .w1-seg, .w1 .w1-crow.w1-segrow, .tt-seg, .py-seg, .wk-seg, .w1 .w1-costsheet .seg, .cp2-seg, .w1 .w1-pseg) > :is(span, button, .w1-flt):not(:disabled):hover { background:#f2f4f7 !important; }
:is(.w1 .w1-seg, .w1 .w1-crow.w1-segrow, .tt-seg, .py-seg, .wk-seg, .w1 .w1-costsheet .seg, .cp2-seg, .w1 .w1-pseg) > :is(.w1-on, .tt-on, .py-on, .on) {
  background:var(--osz-sel-bg) !important; color:var(--osz-sel-ink) !important;
}
@media (max-width:640px) {
  :is(.w1 .w1-seg, .w1 .w1-crow.w1-segrow, .tt-seg, .py-seg, .wk-seg, .cp2-seg, .w1 .w1-pseg) > :is(span, button, .w1-flt) { padding:0 10px !important; font-size:13px !important; flex:1 1 auto; }
}
/* phones: a strip with many options wraps onto more lines instead of running off the screen (Payroll periods) */
@media (max-width:640px) {
  :is(.w1 .w1-seg, .w1 .w1-crow.w1-segrow, .tt-seg, .py-seg, .wk-seg, .cp2-seg, .w1 .w1-pseg) { flex-wrap:wrap !important; height:auto !important; min-height:40px; max-width:100%; }
  :is(.w1 .w1-seg, .w1 .w1-crow.w1-segrow, .tt-seg, .py-seg, .wk-seg, .cp2-seg, .w1 .w1-pseg) > :is(span, button, .w1-flt) { min-height:38px !important; }
}

/* 09-oct (Mathew): every drop-down has the app's look and an animated list (osezy-select.js). The real <select> keeps
   its place and size in the layout (transparent); the styled button sits exactly on top of it. */
.osz-dd{position:relative;display:inline-flex;vertical-align:middle;max-width:100%}
.osz-dd>select.osz-dd-native{opacity:0;pointer-events:none}
.osz-dd>.osz-dd-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:0 12px;
  border:1px solid #d9dee5;border-radius:10px;background:#fff;color:#15171c;font:600 13.5px/1 Inter,system-ui,sans-serif;cursor:pointer;
  text-align:left;white-space:nowrap;overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.osz-dd>.osz-dd-btn>span{overflow:hidden;text-overflow:clip;min-width:0}
.osz-dd>.osz-dd-btn svg{flex:0 0 auto;color:#6c7682;transition:transform .18s ease}
.osz-dd>.osz-dd-btn:hover{background:#f6f7f9;border-color:#c9d0d9}
.osz-dd>.osz-dd-btn:focus-visible{outline:2px solid #191d23;outline-offset:2px}
.osz-dd>.osz-dd-btn.osz-on{border-color:#f0a500;box-shadow:0 0 0 3px rgba(240,165,0,.18)}
.osz-dd>.osz-dd-btn.osz-on svg{transform:rotate(180deg)}
.osz-dd>.osz-dd-btn:disabled{opacity:.55;cursor:not-allowed}
.osz-dd-menu{position:fixed;z-index:3000;max-height:320px;overflow:auto;padding:6px;background:#fff;border:1px solid #e3e7ec;border-radius:12px;
  box-shadow:0 18px 40px -18px rgba(25,29,35,.45),0 2px 6px rgba(25,29,35,.06);font:500 13.5px/1.3 Inter,system-ui,sans-serif;color:#15171c;
  transform-origin:top center;animation:oszDdIn .16s ease-out both}
.osz-dd-menu.up{transform-origin:bottom center}
.osz-dd-opt{padding:9px 12px;border-radius:8px;cursor:pointer;white-space:nowrap}
.osz-dd-opt:hover,.osz-dd-opt.hl{background:#f1f3f6}
.osz-dd-opt.on{background:#eceff3;font-weight:800}
.osz-dd-opt.off{color:#9aa3ad;cursor:not-allowed}
@keyframes oszDdIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.osz-dd-menu{animation:none}}

/* 09-oct (Mathew): a new view fades and rises in (osezy-motion.js adds .osz-enter only when the place changes) */
.osz-enter{animation:oszEnter .24s cubic-bezier(.2,.7,.2,1) both}
/* opacity only: nothing moves, so layout and measurements stay exact while it plays */
@keyframes oszEnter{from{opacity:0}to{opacity:1}}
/* the tab you land on slides its colour in */
.area-nav button{transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
@media (prefers-reduced-motion:reduce){.osz-enter{animation:none}}
/* the transparent select reserves room for the arrow, so the label is never cut */
.osz-dd>select.osz-dd-native{padding-right:38px!important;box-sizing:border-box}