/* Controls: custom checkboxes, radios, selects and scrollbars. Loaded last so it wins. No browser-default control may show; see docs/CONTROLS.md. */
:root{
  --ctl-box:22px; --ctl-hit:22px; --ctl-inset:0px;
  --ctl-bd:var(--ink3); --ctl-bg:var(--sf); --ctl-hover:var(--sf3);
  --sb-w:14px; --sb-thumb:#4a5361; --sb-thumb-h:#667184; --sb-thumb-a:var(--acc); --sb-track:rgba(255,255,255,.04);
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){ --sb-thumb:#a3acb8; --sb-thumb-h:#7f8a98; --sb-track:rgba(0,0,0,.045); }}
:root[data-theme="light"]{ --sb-thumb:#a3acb8; --sb-thumb-h:#7f8a98; --sb-track:rgba(0,0,0,.045); }
@media (max-width:719px),(pointer:coarse){ :root{ --ctl-box:26px; --ctl-hit:44px; --ctl-inset:9px; --sb-w:10px; } }

/* ---------- checkboxes and radios ---------- */
input[type=checkbox],input[type=radio]{
  -webkit-appearance:none; appearance:none; position:relative; flex:none; vertical-align:middle; margin:0; padding:0; border:0; background:transparent;
  width:var(--ctl-hit); height:var(--ctl-hit); cursor:pointer; accent-color:var(--acc); -webkit-tap-highlight-color:transparent;
}
input[type=checkbox]::before,input[type=radio]::before{
  content:""; position:absolute; inset:var(--ctl-inset); box-sizing:border-box; background:var(--ctl-bg); border:2px solid var(--ctl-bd);
  border-radius:6px; transition:background-color .12s,border-color .12s,box-shadow .12s;
}
input[type=radio]::before{border-radius:50%}
input[type=checkbox]::after,input[type=radio]::after{content:""; position:absolute; opacity:0; transition:opacity .1s,transform .1s}
/* the drawn check mark */
input[type=checkbox]::after{
  left:calc(var(--ctl-inset) + var(--ctl-box)*.33); top:calc(var(--ctl-inset) + var(--ctl-box)*.14);
  width:calc(var(--ctl-box)*.26); height:calc(var(--ctl-box)*.5); border:solid var(--accInk); border-width:0 3px 3px 0; border-radius:1px; transform:rotate(45deg) scale(.6);
}
input[type=radio]::after{
  inset:calc(var(--ctl-inset) + var(--ctl-box)*.28); border-radius:50%; background:var(--accInk); transform:scale(.4);
}
input[type=checkbox]:hover:not(:disabled)::before,input[type=radio]:hover:not(:disabled)::before{border-color:var(--acc);background:var(--ctl-hover)}
input[type=checkbox]:checked::before,input[type=radio]:checked::before,input[type=checkbox]:indeterminate::before{background:var(--acc);border-color:var(--acc)}
input[type=checkbox]:checked::after,input[type=radio]:checked::after{opacity:1; transform:rotate(45deg) scale(1)}
input[type=radio]:checked::after{transform:scale(1)}
/* indeterminate (select all with some rows chosen): a bar */
input[type=checkbox]:indeterminate::after{
  opacity:1; left:calc(var(--ctl-inset) + var(--ctl-box)*.24); top:calc(var(--ctl-inset) + var(--ctl-box)*.43); width:calc(var(--ctl-box)*.52); height:3px;
  border:0; background:var(--accInk); border-radius:2px; transform:none;
}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:none}
input[type=checkbox]:focus-visible::before,input[type=radio]:focus-visible::before{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--acc)}
input[type=checkbox]:disabled,input[type=radio]:disabled{cursor:not-allowed}
input[type=checkbox]:disabled::before,input[type=radio]:disabled::before{opacity:.45;background:var(--sf3);border-color:var(--bd2)}
input[type=checkbox]:disabled:checked::before,input[type=radio]:disabled:checked::before{background:var(--ink3);border-color:var(--ink3)}
input[type=checkbox]:disabled::after,input[type=radio]:disabled::after{opacity:0}
input[type=checkbox]:disabled:checked::after,input[type=radio]:disabled:checked::after,input[type=checkbox]:disabled:indeterminate::after{opacity:.8}
@media (forced-colors:active){
  input[type=checkbox]::before,input[type=radio]::before{border-color:CanvasText}
  input[type=checkbox]:checked::before,input[type=radio]:checked::before{background:Highlight;border-color:Highlight}
}
/* never let the old mobile.css size override the hit area */
input[type=checkbox],input[type=radio]{min-width:var(--ctl-hit);min-height:var(--ctl-hit)}
td.c-chk,th.c-chk{line-height:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input[type=checkbox]:active::before,input[type=radio]:active::before{transform:scale(.92)}

/* ---------- selects (native look removed; the enhancer adds a listbox popover for select.sel) ---------- */
select{
  -webkit-appearance:none; appearance:none; height:38px; padding:0 34px 0 12px; border:1px solid var(--bd2); border-radius:6px; background-color:var(--sf);
  color:var(--ink); line-height:1.2; cursor:pointer; max-width:100%;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink2) 50%),linear-gradient(135deg,var(--ink2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%; background-size:6px 6px,6px 6px; background-repeat:no-repeat;
}
select:hover:not(:disabled){border-color:var(--acc)}
select:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
select:disabled{opacity:.5;cursor:not-allowed}
select.sm,.ackform select{height:32px;font-size:12px}
select[multiple],select[size]{height:auto;padding:4px;background-image:none}
@media (max-width:719px){ select{height:44px} }

.ssel{position:relative;display:inline-block;vertical-align:middle;max-width:100%;min-width:0}
.ssel.sm .ssel-btn{height:32px;font-size:12px}
.ssel-native{position:absolute!important;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none!important}
.ssel-btn{
  display:flex;align-items:center;gap:8px;width:100%;min-width:140px;height:38px;padding:0 10px 0 12px;border:1px solid var(--bd2);border-radius:6px;background:var(--sf);
  color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .12s,box-shadow .12s;
}
.ssel-btn:hover:not(:disabled){border-color:var(--acc)}
.ssel-btn:focus-visible,.ssel-btn[aria-expanded=true]{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 30%,transparent)}
.ssel-btn:disabled{opacity:.5;cursor:not-allowed}
.ssel-txt{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ssel-txt.ph{display:block;margin:0;gap:0;color:var(--ink3)}
.ssel-chev{flex:none;width:8px;height:8px;border:solid var(--ink2);border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .12s}
.ssel-btn[aria-expanded=true] .ssel-chev{transform:translateY(2px) rotate(-135deg)}
@media (max-width:719px){ .ssel-btn,.ssel.sm .ssel-btn{height:44px;font-size:15px} }

.ssel-pop{position:fixed;z-index:60;display:flex;flex-direction:column;background:var(--sf);border:1px solid var(--bd2);border-radius:8px;box-shadow:0 16px 40px rgba(0,0,0,.35);overflow:hidden}
.ssel-q{flex:none;height:40px;margin:8px 8px 4px;padding:0 12px;border:1px solid var(--bd2);border-radius:6px;background:var(--bg);color:var(--ink);font:inherit}
.ssel-q:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 30%,transparent)}
.ssel-list{flex:1;min-height:0;overflow-y:auto;padding:4px;outline:none;overscroll-behavior:contain}
.ssel-opt{display:flex;align-items:center;min-height:36px;padding:6px 12px 6px 34px;border-radius:5px;cursor:pointer;position:relative;overflow-wrap:anywhere}
.ssel-opt.act{background:var(--sel)}
.ssel-opt[aria-selected=true]{font-weight:600}
.ssel-opt[aria-selected=true]::before{content:"";position:absolute;left:13px;top:50%;width:6px;height:11px;margin-top:-8px;border:solid var(--acc);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.ssel-opt[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.ssel-none{padding:14px;color:var(--ink3)}
.ssel-pop.ssel-sheet{left:0;right:0;bottom:0;top:auto;max-height:72vh;border-radius:14px 14px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
.ssel-pop.ssel-sheet .ssel-opt{min-height:48px;font-size:15px}
.ssel-pop.ssel-sheet .ssel-q{height:44px;font-size:16px}

/* ---------- scrollbars ---------- */
*{scrollbar-width:auto;scrollbar-color:var(--sb-thumb) var(--sb-track)}
::-webkit-scrollbar{width:var(--sb-w);height:var(--sb-w)}
::-webkit-scrollbar-track{background:var(--sb-track);border-radius:999px}
::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:999px;border:3px solid transparent;background-clip:content-box;min-height:44px;min-width:44px}
::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-h);background-clip:content-box}
::-webkit-scrollbar-thumb:active{background:var(--sb-thumb-a);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}
@media (max-width:719px),(pointer:coarse){ ::-webkit-scrollbar-thumb{border-width:1px} }
/* hidden-by-design strips on phones stay hidden (mobile.css chips and sort bars) */
.bar .seg,.sortbar,.chips{scrollbar-width:none}
.bar .seg::-webkit-scrollbar,.sortbar::-webkit-scrollbar,.chips::-webkit-scrollbar{display:none}