/* Task combobox (TaskCombobox.tsx) on Configure and the One task page. The popup spans the
   nearest size container (container-type:inline-size) from the combobox's left edge, minus 42px. */
.task-combobox { position:relative; font-weight:400; }
.task-combobox #task-search { width:100%; min-height:37px; margin-top:7px; padding:9px 10px; border:1px solid #cbd5df; border-radius:6px; background:white; color:var(--ink); font-family:inherit; font-size:16px; line-height:normal; }
.task-combobox #task-search:focus { outline:2px solid #adc5ff; outline-offset:0; border-color:var(--blue); }
.task-combobox #task-search:disabled { cursor:not-allowed; opacity:.55; }
#task-options,#task-no-results { position:absolute; z-index:20; top:100%; left:0; width:calc(100cqw - 42px); margin-top:4px; border:1px solid #b9c6d2; border-radius:6px; background:white; box-shadow:0 8px 20px #253e5726; }
#task-options { display:block; max-height:720px; overflow-y:auto; padding:4px; border-spacing:0; }
#task-options>thead { display:block; position:sticky; top:-4px; z-index:1; }
#task-options>tbody { display:block; min-width:0; margin:0; padding:0; border:0; }
#task-options>tbody>tr:not(.task-option),#task-options .task-group-heading { display:block; }
.task-group-heading { width:100%; margin:0; padding:9px 12px; color:var(--muted); font-size:12px; font-weight:650; text-align:left; text-transform:capitalize; }
.task-group-divider { border:0; border-top:1px solid var(--line); margin:5px 8px; }
#task-options .task-option,#task-options .task-option-columns { display:grid; }
.task-option,.task-option-columns { grid-template-columns:minmax(220px,1fr) minmax(0,2fr) 60px 20px 24px; gap:8px; }
.task-option { align-items:start; width:100%; border:0; border-radius:4px; background:white; color:var(--ink); padding:10px 12px; text-align:left; font-size:14px; line-height:1.4; overflow-wrap:anywhere; cursor:pointer; }
.task-option>td { padding:0; }
.task-option-columns { padding:8px 12px; border-bottom:1px solid var(--line); background:#f5f8fb; color:var(--muted); font-size:10px; font-weight:650; }
.task-option-columns>th { padding:0; text-align:left; }
.task-sort-button { display:inline-flex; align-items:center; gap:3px; margin:0; padding:0; border:0; border-radius:3px; background:none; color:inherit; font:inherit; text-transform:inherit; cursor:pointer; }
.task-sort-button:hover,.task-sort-button.active { color:#174cbd; }
.task-sort-button:focus-visible { outline:2px solid #174cbd; outline-offset:2px; }
.task-sort-indicator { font-size:8px; line-height:1; }
.task-option+.task-option { border-top:1px solid #edf1f5; }
.task-option-name { min-width:0; text-transform:capitalize; }
.task-option-name small { display:block; margin-top:3px; color:var(--muted); font-size:10px; font-weight:400; text-transform:none; }
.task-option-example { min-width:0; white-space:pre-wrap; color:#40566b; font:12px/1.45 ui-monospace,SFMono-Regular,monospace; }
.task-option-answer-type { color:#526f62; font:11px/1.5 ui-monospace,SFMono-Regular,monospace; }
.task-option-dimensions,.task-option-columns>.task-option-dimensions { text-align:center; color:var(--muted); font:11px/1.5 ui-monospace,SFMono-Regular,monospace; }
.task-option-star-cell { display:flex; justify-content:center; }
.task-star-button { width:24px; height:24px; padding:0; border:1px solid #cbd5df; border-radius:5px; background:white; color:#697d90; font-size:16px; line-height:1; }
.task-star-button:hover,.task-star-button.active { border-color:#7f9bd4; background:#edf2ff; color:#174cbd; }
.task-star-button[aria-pressed="true"] { border-color:#d4aa42; background:#fff8dc; color:#765700; }
.task-star-button.active { outline:2px solid #174cbd; outline-offset:1px; }
.task-answer-type-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:760px) { .task-option { grid-template-columns:minmax(0,1fr) 20px 24px; gap:6px 8px; } .task-option-name,.task-option-example,.task-option-answer-type { grid-column:1; } .task-option-dimensions { grid-column:2; grid-row:1; } .task-option-star-cell { grid-column:3; grid-row:1 / span 3; } #task-options .task-option-columns { display:none; } .task-answer-type-label { position:static; width:auto; height:auto; clip-path:none; } }
.task-option:hover,.task-option.active { background:#eaf0ff; color:#174cbd; }
.task-option[aria-selected="true"] { font-weight:700; }
#task-no-results { margin-top:4px; padding:11px; }
.task-combobox .hint { color:var(--muted); font-size:11px; font-weight:400; line-height:1.6; margin:7px 0 0; }
.task-combobox .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Review flag badges of task rows (TaskFlagBadges.tsx). Bad task is red, and its row gets a red
   left edge, because it marks a task to avoid. */
.task-flag-badges { display:inline-flex; flex-wrap:wrap; gap:4px; margin-left:6px; vertical-align:1px; text-transform:none; }
.task-flag-badge { display:inline-flex; align-items:center; gap:3px; padding:0 5px; border:1px solid #9fb3d9; border-radius:9px; background:#eef3ff; color:#1d3f8f; font-size:11px; font-weight:600; line-height:16px; }
.task-flag-badge-bad-task { border-color:#b42318; background:#b42318; color:white; }
#task-options .task-option[data-bad-task="true"] { box-shadow:inset 3px 0 0 #b42318; }
/* Flag toggles of the selected task (TaskStateToggles.tsx), under the task combobox. */
.task-state-toggles { margin-top:8px; font-weight:400; }
.task-state-toggle-row { display:flex; flex-wrap:wrap; gap:6px; min-width:0; margin:0; padding:0; border:0; }
.task-state-toggle { display:inline-flex; align-items:center; gap:4px; min-height:28px; padding:3px 8px; border:1px solid #cbd5df; border-radius:5px; background:white; color:#4a5f73; font:inherit; font-size:12px; line-height:1.2; cursor:pointer; }
.task-state-toggle:hover { border-color:#7f9bd4; background:#edf2ff; color:#174cbd; }
.task-state-toggle:focus-visible { outline:2px solid #174cbd; outline-offset:1px; }
.task-state-star[aria-pressed="true"] { border-color:#d4aa42; background:#fff8dc; color:#765700; }
.task-state-needs-rewording[aria-pressed="true"],.task-state-needs-max-bump[aria-pressed="true"] { border-color:#7f9bd4; background:#e7eeff; color:#1d3f8f; }
.task-state-bad-task[aria-pressed="true"] { border-color:#b42318; background:#b42318; color:white; }
.task-state-toggles .task-flags-warning { margin:6px 0 0; color:#9a3412; font-size:11px; line-height:1.6; }
.task-state-toggles .task-flags-note { margin:6px 0 0; color:var(--muted, #64748b); font-size:11px; line-height:1.6; }