/* Task Helper — the NOTIFICATION bell, list and switches (job-intake.md §38; NT-2, BRIEF-1111, lane TASK HELPER EMAIL).
   Copyright Rapid Surveys Pty Ltd. Namespaced .nt-; app tokens only (a dark token set later follows by itself). Phone first. */
.nt-bell { position: relative; }
.nt-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--err); color: var(--accent-ink); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.nt-ov { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: flex-end; padding: 56px 8px 8px; background: rgba(0, 0, 0, .2); }
.nt-panel { width: 100%; max-width: 420px; max-height: calc(100vh - 72px); overflow: auto; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: 12px; box-sizing: border-box; }
.nt-dlg { max-width: 520px; }
.nt-head { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.nt-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.nt-tools button, .nt-x, .nt-open, .nt-more { width: auto; }   /* the app's panel buttons are full width; these aren't */
.nt-head h3 { flex: 1; margin: 0; font-size: 17px; }
.nt-x { flex: none; width: 44px; min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; border-radius: 8px; }
.nt-x:hover { background: var(--hover); }
.nt-list { list-style: none; margin: 0; padding: 0; }
.nt-row { border-top: 1px solid var(--line); }
.nt-row:first-child { border-top: 0; }
.nt-open { display: flex; box-sizing: border-box; align-items: flex-start; gap: 8px; width: 100%; min-height: 44px; padding: 8px 6px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; border-radius: 8px; }
.nt-open:hover { background: var(--hover); }
.nt-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: transparent; }
.nt-unread .nt-dot { background: var(--accent); }
.nt-unread .nt-txt { font-weight: 600; }
.nt-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nt-at { flex: none; font-size: 12px; color: var(--muted); }
.nt-why { margin: 0 6px 8px 22px; font-size: 13px; color: var(--muted); font-style: italic; }
.nt-msg { margin: 8px 0 0; }
.nt-more { margin: 8px 0 0; }
.nt-tab { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 14px; }
.nt-tab th, .nt-tab td { padding: 6px 4px; text-align: left; border-top: 1px solid var(--line); vertical-align: middle; }
.nt-tab thead th { font-size: 12px; color: var(--muted); border-top: 0; }
.nt-sw { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; margin: 0; }
.nt-sw input { width: auto; margin: 0; flex: none; }
.nt-swl { white-space: nowrap; }
.nt-sw input:disabled + .nt-swl { color: var(--muted); font-style: italic; }
.nt-btns { display: flex; gap: 8px; margin: 8px 0 0; }
@media (max-width: 420px) { .nt-ov { padding: 52px 0 0; } .nt-panel { border-radius: 0 0 14px 14px; max-height: calc(100vh - 52px); } .nt-tab thead { display: none; } .nt-tab td, .nt-tab th { display: block; border-top: 0; padding: 2px 4px; } .nt-tab tr { display: block; border-top: 1px solid var(--line); padding: 6px 0; } }
@media (pointer: coarse) { .nt-all, .nt-set, .nt-more, .nt-save, .nt-cancel { min-height: 44px; } }