/* Task Helper — the status picker (job-intake.md §14.7; BRIEF-1087). Copyright Rapid Surveys Pty Ltd. App tokens only; namespace sp-. */
.sp-native { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; opacity: 0; pointer-events: none; }
.sp-btn { display: inline-flex; align-items: center; gap: 6px; width: auto; max-width: 100%; min-height: 40px; margin: 0; padding: 6px 10px 6px 6px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sp-btn:hover { border-color: #c9d2dc; }
.sp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 109, 246, .15); }
.sp-btn[aria-invalid="true"] { border-color: var(--err); }
.sp-btn .spill { font-size: 13px; }
.sp-caret { flex: none; color: var(--muted); transition: transform .15s; }
.sp-btn[aria-expanded="true"] .sp-caret { transform: rotate(180deg); }
.sp-btn.sp-ro { cursor: default; padding-right: 6px; border-color: transparent; background: transparent; }
.t-ro .sp-caret { display: none; }
.sp-none { color: var(--muted); font-size: 14px; padding: 0 4px; }
.sp-backdrop { position: fixed; inset: 0; z-index: 90; background: transparent; }
.sp-pop { position: fixed; z-index: 91; max-height: min(320px, 60vh); overflow-y: auto; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(20, 28, 40, .18); animation: sp-in .15s ease-out; }
.sp-list { list-style: none; margin: 0; padding: 0; outline: none; }
.sp-opt { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 10px 4px 6px; border-radius: 8px; cursor: pointer; }
.sp-opt.sp-act { background: var(--hover); }
.sp-list:focus-visible .sp-opt.sp-act { box-shadow: inset 0 0 0 2px var(--accent); }
.sp-check { flex: none; width: 18px; display: inline-flex; justify-content: center; color: var(--accent); }
.sp-backtag { font-size: 12px; color: var(--muted); }
/* a phone: a bottom sheet, 44 px rows */
.sp-sheet-bg { background: rgba(20, 28, 40, .45); }
.sp-sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; max-height: 70vh; padding: 6px 12px calc(12px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; border: 0; animation: sp-up .2s ease-out; }
.sp-sheet-h { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0 10px; }
.sp-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); }
.sp-sheet .sp-opt { min-height: 48px; padding: 6px 12px 6px 8px; }
.sp-sheet .spill { font-size: 14px; }
@keyframes sp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes sp-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sp-pop, .sp-sheet { animation: none; } .sp-caret { transition: none; } }
@media (pointer: coarse) { .sp-btn { min-height: 44px; } }
.sp-pop .sp-list:focus, .sp-pop .sp-list:focus-visible { outline: none; }   /* the active row carries the focus ring */