/* sassi/shared/pick.css - the family pickers on a touch screen (shared/pick.js). Canonical in sassi/shared, byte-identical
 * in every app's public_html/assets/. Loaded after datepicker.css. Nothing here applies on a mouse screen: pick.js adds the
 * elements only when the pointer is coarse. */
select.pick-hidden{display:none !important}
.pick-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;max-width:100%;background:var(--sunk);color:var(--txt);border:0;border-radius:var(--r-input);padding:.6rem .8rem;font-size:14px;font-family:inherit;text-align:start;cursor:pointer;min-height:38px}
.pick-btn.auto{width:auto}
.pick-btn.empty .pick-txt{color:var(--dim)}
.pick-btn i{color:var(--dim);font-size:12px;flex:none}
.pick-btn:focus-visible{outline:2px solid var(--ac);outline-offset:-1px}
.pick-btn.pick-time{width:auto;direction:ltr;font-variant-numeric:tabular-nums;gap:.45rem;font-size:15px}
.pick-btn.pick-time i{font-size:13px}
.dtf-time.picked select,.dtf-time.picked>span{display:none}
/* the sheet sits above every other layer (a select inside a sheet or a modal) */
.pick-bg{z-index:69}
.pick-sheet{z-index:70;max-height:min(78vh,640px);display:flex;flex-direction:column}
.pick-sheet .sheet-head{margin-bottom:.4rem}
.pick-search{display:flex;align-items:center;gap:.5rem;background:var(--sunk);border-radius:var(--r-input);padding:0 .8rem;margin:0 0 .5rem}
.pick-search i{color:var(--dim);font-size:13px}
.pick-search input{background:transparent;padding:.6rem 0;width:100%}
.pick-body{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0;padding-bottom:.4rem}
.pick-list{display:flex;flex-direction:column}
.pick-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:.85rem .3rem;font-size:15px;font-family:inherit;color:var(--txt);text-align:start;min-height:48px}
.pick-row:last-child{border-bottom:0}
.pick-row i{color:var(--ac);opacity:0;font-size:14px;flex:none}
.pick-row.sel{color:var(--acText);font-weight:600}
.pick-row.sel i{opacity:1}
.pick-row.off{color:var(--dim);opacity:.5}
.pick-row:active{background:var(--hover)}
.pick-none{padding:.8rem .3rem;margin:0}
/* the time sheet: two wheels */
.pick-wheels{position:relative;display:flex;justify-content:center;align-items:center;gap:.6rem;direction:ltr;padding:.4rem 0 .2rem}
.pick-wheel{height:220px;width:96px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent);overscroll-behavior:contain;touch-action:pan-y}
.pick-wheel::-webkit-scrollbar{display:none}
.pick-pad{height:88px}
.pick-item{height:44px;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;font-size:26px;color:var(--dim);font-variant-numeric:tabular-nums;font-weight:500;cursor:pointer}
.pick-item.sel{color:var(--txt);font-size:32px;font-weight:600}
.pick-colon{font-size:32px;font-weight:600;color:var(--txt);padding-bottom:4px}
.pick-wheel-line{position:absolute;left:50%;top:50%;width:230px;height:44px;transform:translate(-50%,-50%);border-top:2px solid var(--ac);border-bottom:2px solid var(--ac);pointer-events:none;border-radius:2px}
.pick-done{margin-top:.6rem;width:100%}