/* The One task picker (TaskPicker.tsx). It takes the heading's full width and is the size
   container that the task-combobox.css popup spans, as .workbench is on the Workbench. */
.page-heading:has(> .task-picker) { flex-wrap: wrap; row-gap: 18px; }
.task-picker { position: relative; z-index: 6; display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: flex-start; gap: 16px 12px; width: 100%; container-type: inline-size; }
.task-picker-field { flex: 0 1 420px; min-width: min(260px, 100%); }
.task-picker-field > label { display: block; font-size: 12px; font-weight: 600; }
/* Keep model settings at their content width so dimension ranges fit to their right. */
.task-picker > .model-settings { display: grid; grid-template-columns: minmax(0, 1fr); flex: 0 1 auto; gap: 10px; width: max-content; max-width: 100%; min-width: 0; margin-bottom: 0; }
.task-picker .model-settings-grid { min-width: 0; gap: 2px 12px; scrollbar-gutter: stable; }
/* A folded panel keeps its open grid's width, so the dimension ranges beside it do not move. The
   grid stays laid out, invisible and without height, in the heading's cell, so it adds no row.
   Only !important overrides models.css's [hidden] rule. */
.task-picker > .model-settings[data-collapsed] > .model-settings-heading,
.task-picker > .model-settings[data-collapsed] > .model-settings-grid[hidden] { grid-area: 1 / 1; }
.task-picker > .model-settings[data-collapsed] > .model-settings-grid[hidden] { display: grid !important; visibility: hidden; height: 0; overflow: hidden; }
.task-picker .collapse-toggles { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
.task-picker .task-combobox { width: 100%; }
.task-picker-notice { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.task-workbench-link { margin: 6px 0 0; font-size: 11px; font-weight: 600; }
.task-workbench-link .task-link { color: var(--blue); text-decoration: none; text-underline-offset: 2px; }
.task-workbench-link .task-link:hover { text-decoration: underline; }

/* The count and range columns wrap together with the controls on narrow screens. */
.task-dimensions { display: flex; align-items: flex-start; gap: 20px; padding: 12px 0; min-width: 0; }
.task-dimensions-count { display: flex; flex-direction: column; flex: 0 0 auto; align-items: center; gap: 4px; }
.task-dimensions-count strong { color: var(--ink); font-size: 40px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.task-dimensions-count span { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.task-dimensions-ranges { display: flex; flex-wrap: wrap; gap: 16px 20px; margin: 0; min-width: 0; }
.task-dimension { border-left: 1px solid var(--line-strong); padding-left: 16px; }
.task-dimension dt { color: var(--muted); font-size: 11px; text-transform: capitalize; }
.task-dimension dd { margin: 6px 0 0; color: var(--ink); font-size: 20px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The value that the dimension takes in the default row, under its range. */
.task-dimension dd.task-dimension-default { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 600; }