/* jselect — se jselect.js. Knappen ärver appens select-utseende via att appens CSS listar .jsel-btn bredvid select.
   Allt nedan är struktur + popup; färger kommer från appens CSS-variabler (--panel, --ink, --line, accent). */
:where(.jsel-btn){font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;margin:0;box-sizing:border-box}
.jsel-btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding-right:34px;min-height:44px;line-height:1.3}
.jsel-btn::after{content:"";position:absolute;right:12px;top:50%;width:14px;height:14px;margin-top:-7px;background:currentColor;opacity:.6;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.jsel-btn[aria-expanded="true"]::after{transform:rotate(180deg)}
.jsel-btn[disabled]{opacity:.55;cursor:not-allowed}
.jsel-btn[aria-expanded="true"]{border-color:var(--jsel-accent,var(--accent,var(--brass,var(--coral,var(--green,#555)))))}
.jsel-btn:focus-visible{outline:2px solid var(--jsel-accent,var(--accent,var(--brass,var(--coral,var(--green,#555)))));outline-offset:2px}
.jsel-txt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jsel-txt.jsel-empty{opacity:.6}
.jsel-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;margin:0!important;padding:0!important;border:0!important;clip:rect(0 0 0 0)}
.jsel-pop{position:fixed;z-index:2147483000;box-sizing:border-box;background:var(--jsel-bg,var(--panel,#fff));color:var(--jsel-ink,var(--ink,#222));
  border:1px solid var(--jsel-line,var(--line,#bbb));border-radius:var(--jsel-radius,12px);box-shadow:var(--jsel-shadow,0 12px 32px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.08));overflow:hidden;font-size:16px;line-height:1.3}
.jsel-pop *{box-sizing:border-box}
.jsel-list{overflow-y:auto;overscroll-behavior:contain;padding:6px;-webkit-overflow-scrolling:touch}
.jsel-opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:max(0px,calc(var(--jsel-radius,12px) - 4px));cursor:pointer;-webkit-tap-highlight-color:transparent}
.jsel-opt-t{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.jsel-opt.jsel-act{background:color-mix(in srgb,var(--jsel-accent,var(--accent,var(--brass,var(--coral,var(--green,#555))))) 12%,transparent)}
.jsel-opt.jsel-sel{font-weight:600}
.jsel-opt.jsel-sel::after{content:"";flex:0 0 auto;width:14px;height:14px;background:var(--jsel-accent,var(--accent,var(--brass,var(--coral,var(--green,#555)))));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.jsel-opt.jsel-dis{opacity:.45;cursor:not-allowed}
.jsel-group{padding:10px 12px 4px;font-size:.78em;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.65}
.jsel-back{position:fixed;inset:0;z-index:2147482999;background:rgba(0,0,0,.35)}
.jsel-sheet{position:fixed;border-radius:var(--jsel-radius,16px) var(--jsel-radius,16px) 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0)}
.jsel-title{padding:14px 16px 6px;font-weight:700;font-size:.95em;opacity:.8}
.jsel-sheet .jsel-opt{min-height:48px}
@media (prefers-reduced-motion:no-preference){.jsel-pop{animation:jsel-in .12s ease-out}.jsel-sheet{animation:jsel-up .18s ease-out}}
@keyframes jsel-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes jsel-up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}

.jsel-opt.jsel-sep{margin-top:4px;border-top:1px dashed var(--jsel-line,var(--line,#bbb));border-radius:0 0 max(0px,calc(var(--jsel-radius,12px) - 4px)) max(0px,calc(var(--jsel-radius,12px) - 4px));color:var(--jsel-accent,var(--accent,inherit));font-weight:600}