/* Task Helper — the task panel's shared tabs (BRIEF-932). Copyright Rapid Surveys Pty Ltd. The same look as TIME's tabs. */
.tt-tabs { display: flex; margin: -4px 0 14px; border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tt-tabs::-webkit-scrollbar { display: none; }
/* BRIEF-1168: tabs fill the row when they fit; when they don't, they keep their size and the row scrolls, with a fade on the side that has more */
.tt-tabs.tt-more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.tt-tabs.tt-more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.tt-tabs.tt-more-l.tt-more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.tt-tabs button { flex: 1 0 auto; white-space: nowrap; width: auto; min-height: 44px; margin: 0; padding: 0 12px; font-size: 15px; font-weight: 600; border: 0; border-radius: 0; background: var(--card); color: var(--muted); }
.tt-tabs button + button { border-left: 1px solid var(--line); }
.tt-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.tt-tabs button:focus-visible { outline-offset: -3px; }
/* Another tab shows → the Details content hides (the bar, the panes and anything marked data-tt-keep stay). */
.tt-host:not([data-tt-tab="details"]) > :not(.tt-tabs):not(.tt-pane):not([data-tt-keep]) { display: none !important; }
.tt-pane[hidden] { display: none; }
/* BRIEF-1241 / 1244 (Gary): a GROUP tab (e.g. Diary) — a LIGHT switch above its sections: small text tabs, the chosen one underlined
   (not a second button bar), tucked under the main tabs; still 44 px to tap; no switch for one section */
.tt-seg { display: flex; gap: 2px; margin: -8px 0 4px; padding: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tt-seg::-webkit-scrollbar { display: none; }
.tt-seg[hidden] { display: none; }
.tt-seg button { flex: 0 0 auto; white-space: nowrap; width: auto; min-height: 44px; margin: 0 0 -1px; padding: 0 10px; font-size: 14px; font-weight: 600;
  border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--muted); }
.tt-seg button:hover { color: var(--ink); }
.tt-seg button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tt-seg button:focus-visible { outline-offset: -3px; }
.tt-sec[hidden] { display: none; }