/* L137 — Global dropdown skin (pairs with m-dropdown.js). Tokens only (no hex/rgb literals).
   1) every native <select> gets one trigger look (chevron, hover, open, focus)
   2) the list that opens is the app's own animated panel (floating on desktop, bottom sheet on phones)
   3) the multi-select picker (pk-*) shares the same panel look so nothing in the app looks different.
   Override the chevron colour for a dark/glass bar with  --dd-chev  (see .lf-dk below). Opt a select out with data-native. */

:root{
  --dd-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236483aa' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --dd-chev-open:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8874f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
  --dd-ease:cubic-bezier(.2,.8,.2,1);
  --dd-hi:rgba(var(--c-blue-rgb),.12);
  --dd-sel:rgba(var(--c-sand-rgb),.16);
}

/* ---------- 1. trigger (the <select> itself) ---------- */
select:not([multiple]):not([size]):not([data-native]):not(.avl-status-overlay-select){
  -webkit-appearance:none!important;appearance:none!important;
  background-image:var(--dd-chev)!important;background-repeat:no-repeat!important;background-size:14px 14px!important;
  background-position:calc(100% - 11px) 50%!important;
  padding-inline-end:32px!important;text-overflow:ellipsis;cursor:pointer;
  transition:border-color var(--dur-fast) var(--dd-ease),box-shadow var(--dur-fast) var(--dd-ease),background-color var(--dur-fast) var(--dd-ease)}
[dir=rtl] select:not([multiple]):not([size]):not([data-native]):not(.avl-status-overlay-select),
select:dir(rtl):not([multiple]):not([size]):not([data-native]):not(.avl-status-overlay-select){background-position:11px 50%!important}
select:not([multiple]):not([size]):not([data-native]):not(.avl-status-overlay-select):hover:not(:disabled){border-color:var(--c-blue)}
select:not([multiple]):not([size]):not([data-native]):not(.avl-status-overlay-select):disabled{cursor:not-allowed;opacity:.6}
select[data-dd-open]:not([data-native]){border-color:var(--c-sand-dark)!important;box-shadow:0 0 0 4px rgba(var(--c-sand-rgb),.28)!important;background-image:var(--dd-chev-open)!important}
select.dd-flash{animation:dd-flash 640ms var(--dd-ease)}
@keyframes dd-flash{0%{box-shadow:0 0 0 0 rgba(var(--c-sand-rgb),.55)}100%{box-shadow:0 0 0 9px rgba(var(--c-sand-rgb),0)}}
/* dark glass bar (Leads toolbar): light chevron */
.lf-dk{--dd-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3c08a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");--dd-chev-open:var(--dd-chev)}
.al-auto-sel{--dd-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3c08a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");--dd-chev-open:var(--dd-chev)}

/* ---------- 2. panel ---------- */
.dd-panel{position:fixed;z-index:var(--z-top,120);display:flex;flex-direction:column;box-sizing:border-box;min-width:0;overflow:hidden;
  background:var(--bg-raised,var(--c-white));color:var(--tx-body,var(--c-n700));border:1px solid var(--ln,var(--c-n200));border-radius:var(--rd-md);
  box-shadow:0 1px 0 rgba(var(--c-white-rgb),.6) inset,0 2px 6px rgba(var(--c-starlight-rgb),.07),0 22px 48px -8px rgba(var(--c-starlight-rgb),.28);
  font:var(--fw-med,500) var(--fs-md) var(--font-body,inherit);line-height:1.35;-webkit-font-smoothing:antialiased;
  opacity:0;transform:translateY(-8px) scale(.965);transform-origin:var(--dd-ox,50%) 0;
  transition:opacity 150ms var(--dd-ease),transform 230ms var(--dd-ease);will-change:transform,opacity}
.dd-panel.dd-up{transform:translateY(8px) scale(.965);transform-origin:var(--dd-ox,50%) 100%}
.dd-panel.dd-in{opacity:1;transform:none}
.dd-panel.dd-out{opacity:0;transform:translateY(-4px) scale(.98);transition-duration:110ms;transition-timing-function:cubic-bezier(.4,0,1,1)}
.dd-panel.dd-up.dd-out{transform:translateY(4px) scale(.98)}
:root[data-theme="dark"] .dd-panel,body.hx-dark .dd-panel{box-shadow:0 1px 0 rgba(var(--c-white-rgb),.05) inset,0 24px 52px -6px rgba(var(--c-black-rgb),.65)}
body.hx-dark .dd-panel{background:var(--c-night);color:var(--c-n200);border-color:rgba(var(--c-white-rgb),.12)}
body.hx-dark .dd-opt.dd-on{color:var(--c-white)}

.dd-search{position:relative;flex:none;padding:8px 8px 6px;border-bottom:1px solid var(--ln,var(--c-n200));background:var(--bg-raised,var(--c-white))}
.dd-search svg{position:absolute;inset-inline-start:18px;top:50%;width:16px;height:16px;margin-top:-1px;transform:translateY(-50%);fill:none;stroke:var(--tx-faint,var(--c-n500));stroke-width:2.2;stroke-linecap:round;pointer-events:none}
.dd-q{width:100%;min-height:38px;box-sizing:border-box;padding:0 12px;padding-inline-start:36px;border:1px solid var(--ln,var(--c-n200));border-radius:var(--rd-sm);background:var(--bg-tint,var(--c-n50));color:inherit;font:inherit;font-size:var(--fs-md);outline:0;-webkit-appearance:none;appearance:none;box-shadow:none;transition:border-color var(--dur-fast) var(--dd-ease),box-shadow var(--dur-fast) var(--dd-ease),background-color var(--dur-fast) var(--dd-ease)}
.dd-q:focus{border-color:var(--c-sand-dark);background:var(--bg-surface,var(--c-white));box-shadow:0 0 0 3px rgba(var(--c-sand-rgb),.3)}
.dd-q::-webkit-search-cancel-button{-webkit-appearance:none}

.dd-list{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--dd-pad,5px);scrollbar-width:thin;scrollbar-color:var(--ln-strong,var(--c-n300)) transparent}
.dd-list::-webkit-scrollbar{width:8px}.dd-list::-webkit-scrollbar-thumb{background:var(--ln-strong,var(--c-n300));border-radius:var(--rd-pill);border:2px solid transparent;background-clip:content-box}
/* the glide: one highlight that slides between rows */
.dd-hl{position:absolute;inset-inline:var(--dd-pad,5px);top:0;height:0;border-radius:var(--rd-sm);background:var(--dd-hi);opacity:0;pointer-events:none;z-index:0;
  transition:transform 190ms var(--dd-ease),height 190ms var(--dd-ease),opacity 120ms linear}
.dd-opt,.dd-grp{position:relative;z-index:1}
.dd-opt{display:flex;align-items:center;gap:10px;min-height:38px;padding:7px 12px;border-radius:var(--rd-sm);cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;color:inherit;
  transition:color var(--dur-fast) var(--dd-ease)}
.dd-opt .dd-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext}
.dd-opt .dd-t small{display:block;margin-top:1px;font-size:var(--fs-xs);font-weight:400;color:var(--tx-faint,var(--c-n500));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-opt.dd-ph:not(.dd-on) .dd-t{color:var(--tx-faint,var(--c-n500))}
.dd-opt.dd-dis{opacity:.45;cursor:not-allowed}
.dd-opt.dd-hi:not(.dd-dis){color:var(--tx-strong,var(--c-starlight))}
/* selected: soft sand wash + accent bar + drawn check */
.dd-opt.dd-on{font-weight:700;color:var(--tx-strong,var(--c-starlight))}
.dd-opt.dd-on:not(.dd-hi){background:var(--dd-sel)}
.dd-hl.dd-sel{background:rgba(var(--c-sand-rgb),.26)}
.dd-opt.dd-on::before{content:"";position:absolute;inset-block:8px;inset-inline-start:0;width:3px;border-radius:var(--rd-pill);background:var(--c-sand-dark);transform-origin:center;animation:dd-bar 260ms var(--dd-ease) both}
.dd-ck{flex:none;width:18px;height:18px;fill:none;stroke:var(--c-sand-dark);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.dd-ck path{stroke-dasharray:24;stroke-dashoffset:24}
.dd-opt.dd-on .dd-ck{opacity:1}
.dd-opt.dd-on .dd-ck path{animation:dd-draw 360ms 120ms var(--dd-ease) forwards}
.dd-opt.dd-pick{transform:scale(.985);transition:transform 90ms var(--dd-ease)}
.dd-grp{padding:10px 12px 4px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-faint,var(--c-n500));cursor:default}
.dd-grp:not(:first-of-type){margin-top:2px;border-top:1px solid var(--ln,var(--c-n200))}
.dd-empty{padding:18px 14px;text-align:center;color:var(--tx-faint,var(--c-n500));font-size:var(--fs-sm)}

/* options enter with a short stagger (transform/opacity only) */
.dd-in .dd-list:not(.dd-noanim) .dd-opt,.dd-in .dd-list:not(.dd-noanim) .dd-grp{animation:dd-row 240ms var(--dd-ease) both;animation-delay:calc(var(--i,0) * 16ms + 50ms)}
.dd-panel:not(.dd-in):not(.dd-out) .dd-opt,.dd-panel:not(.dd-in):not(.dd-out) .dd-grp{opacity:0}
@keyframes dd-row{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes dd-draw{to{stroke-dashoffset:0}}
@keyframes dd-bar{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- phone: bottom sheet ---------- */
.dd-bd{position:fixed;inset:0;z-index:calc(var(--z-top,120) - 1);background:rgba(var(--c-black-rgb),.38);opacity:0;transition:opacity 220ms var(--dd-ease);-webkit-tap-highlight-color:transparent}
.dd-bd.dd-in{opacity:1}
.dd-panel.dd-sheet{inset:auto 0 0 0;width:auto;max-height:min(72vh,560px);border-radius:var(--rd-lg) var(--rd-lg) 0 0;border-width:1px 0 0;padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(100%);opacity:1;transform-origin:50% 100%;transition:transform 320ms var(--dd-ease)}
.dd-panel.dd-sheet.dd-in{transform:none}
.dd-panel.dd-sheet.dd-out{transform:translateY(100%);opacity:1;transition-duration:220ms}
.dd-head{flex:none;padding:8px 16px 6px;touch-action:none;cursor:grab}
.dd-grab{display:block;width:40px;height:4px;margin:2px auto 8px;border-radius:var(--rd-pill);background:var(--ln-strong,var(--c-n300))}
.dd-title{font-size:var(--fs-title);font-weight:700;color:var(--tx-strong,var(--c-starlight));text-align:start;padding-bottom:6px}
.dd-sheet .dd-opt{min-height:50px;font-size:var(--fs-lg);padding:10px 14px}
.dd-sheet .dd-q{min-height:46px;font-size:var(--fs-lg)}
.dd-sheet .dd-list{--dd-pad:8px;padding-block:6px 10px}

/* ---------- 3. m-picker (multi-select) shares the look ---------- */
.pk-panel{border-color:var(--ln,var(--c-n200))!important;border-radius:var(--rd-md);box-shadow:0 2px 6px rgba(var(--c-starlight-rgb),.07),0 22px 48px -8px rgba(var(--c-starlight-rgb),.28)!important}
.pk-panel.pk-sheet{border-radius:var(--rd-lg) var(--rd-lg) 0 0}
.pk-o{transition:background-color var(--dur-fast) var(--dd-ease),color var(--dur-fast) var(--dd-ease)}
.pk-o:hover,.pk-o:focus-visible{background:var(--dd-hi)}
.pk-o.on{background:var(--dd-sel)}
.pk-b:hover{border-color:var(--c-blue)}
.pk-b:focus-visible,.pk-b[aria-expanded=true]{border-color:var(--c-sand-dark)}
.pk-b[aria-expanded=true] .pk-ch{stroke:var(--c-sand-dark)}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  .dd-panel,.dd-bd,.dd-hl,.dd-opt,.dd-q{transition:none!important}
  .dd-in .dd-opt,.dd-in .dd-grp,.dd-opt.dd-on::before,.dd-opt.dd-on .dd-ck path,select.dd-flash{animation:none!important}
  .dd-ck path{stroke-dashoffset:0}
  .dd-panel{transform:none}.dd-panel.dd-sheet:not(.dd-in){opacity:0}
}
body.motion-reduced .dd-panel,body.motion-reduced .dd-hl{transition:none!important}
body.motion-reduced .dd-in .dd-opt,body.motion-reduced .dd-in .dd-grp{animation:none!important}
:root[data-theme="dark"] .dd-hl{background:rgba(var(--c-blue-rgb),.24)}
:root[data-theme="dark"] .dd-hl.dd-sel{background:rgba(var(--c-sand-rgb),.30)}
:root[data-theme="dark"] .dd-opt.dd-on:not(.dd-hi){background:rgba(var(--c-sand-rgb),.16)}