/* Стили страницы подбора. Вынесены из <style> в шаблоне без единой правки
 * правил: задача выноса — только перестать держать 530 строк CSS внутри
 * разметки. Порядок подключения важен: общий пакет идёт раньше этого
 * файла, чтобы правила страницы оставались последним словом. */



* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* AIR-CURTAINS-QUICK-SELECTION-UX-01: reserve the scrollbar's own
           width whether or not the page is currently tall enough to need
           one, so navigating between a short page and a tall one doesn't
           change the available content width by a scrollbar's worth of
           pixels (visible as the whole page nudging left/right). */
        html {
            scrollbar-gutter: stable;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
            background: var(--bg);
            color: var(--ink);
            line-height: 1.6;
            padding: 24px 20px;
        }

        /* AIR-CURTAINS-MANUAL-SELECTION-ACTION-PANEL-01: the bottom
           clearance used to live on `body` (a dynamic padding chasing the
           fixed panel's measured height -- see git history / EVIDENCE.md
           for the old rule). With .action-panel no longer `position:
           fixed`, main's own bottom padding is just ordinary breathing
           room before the panel row, not overlap prevention. */
        .ac-scroll-main {
            padding-bottom: 24px;
        }

        .container {
            max-width: 960px;
            margin: 0 auto;
        }

        /* Shared top nav -- this app previously had no persistent
           cross-page navigation at all, only scattered per-page action
           buttons. Same component/tokens as static/air_curtains.css'
           .app-header (kept inline here rather than linking that
           stylesheet, to avoid any cascade-order risk with this page's
           own long-established .btn-primary/.btn-secondary/.card-named
           classes on the app's busiest page). */
        .app-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            /* AIR-CURTAINS-QUICK-SELECTION-UX-01: this copy of the shared
               .app-header rule (see the comment above) had dropped the
               `gap` the original in static/air_curtains.css carries --
               with `justify-content: space-between` and eight nav items
               often leaving no slack in a 960px-capped header, the logo
               and "Проекты" ended up flush against each other with zero
               visible space. `gap` guarantees a floor regardless of how
               much slack space-between actually has to distribute. */
            gap: 16px;
            padding: 14px 24px;
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 10px;
            margin: 0 auto 24px;
            max-width: 960px;
        }

        .app-header .app-logo {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--accent);
            text-decoration: none;
            /* Логотип не сжимается и не переносится. Шапка ограничена 960px,
               пунктов меню восемь — без этого на ноутбучных 1440px им не
               хватало места, и «Air Curtains GUI» вставало в две строки. */
            flex: 0 0 auto;
            white-space: nowrap;
        }

        .app-header .app-nav {
            display: flex;
            gap: 8px 24px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .app-header .app-nav a {
            color: var(--muted);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.9rem;
            /* Пункт переносится целиком, а не разрывается по словам. */
            white-space: nowrap;
        }

        .app-header .app-nav a:hover,
        .app-header .app-nav a.active {
            color: var(--accent);
        }

        /* Same dropdown-group fix as static/air_curtains.css -- kept as a
           separate copy here for the same cascade-order reason the rest of
           this page's .app-header/.app-nav rules are duplicated rather than
           shared. */
        .app-header .app-nav details {
            position: relative;
        }

        .app-header .app-nav summary {
            display: flex;
            align-items: center;
            gap: 4px;
            color: var(--muted);
            font-weight: 500;
            font-size: 0.9rem;
            white-space: nowrap;
            cursor: pointer;
            list-style: none;
            user-select: none;
        }

        .app-header .app-nav summary::-webkit-details-marker {
            display: none;
        }

        .app-header .app-nav summary::after {
            content: "\25be";
            font-size: 0.7em;
        }

        .app-header .app-nav details[open] summary,
        .app-header .app-nav details.has-active summary {
            color: var(--accent);
        }

        .app-header .app-nav .nav-group-panel {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            z-index: 30;
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 200px;
            padding: 8px;
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 10px;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
        }

        .app-header .app-nav .nav-group-panel a {
            padding: 6px 10px;
            border-radius: 6px;
            white-space: nowrap;
        }

        .app-header .app-nav .nav-group-panel a:hover {
            background: var(--bg);
        }

        /* На узком экране шапка складывается в колонку: логотип сверху,
           меню под ним слева. */
        @media (max-width: 820px) {
            .app-header {
                flex-direction: column;
                align-items: stretch;
            }

            .app-header .app-nav {
                justify-content: flex-start;
            }
        }

        .page-header {
            text-align: center;
            margin-bottom: 28px;
        }

        .page-header h1 {
            color: var(--ink-title);
            font-size: 2rem;
            margin-bottom: 6px;
        }

        .page-header .subtitle {
            color: var(--muted);
            font-size: 1rem;
        }

        #status-message .status {
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            text-align: center;
            font-weight: 600;
        }

        .status.ready {
            background: var(--ok-bg);
            color: var(--ok);
            border: 1px solid var(--ok-line);
        }

        .status.partial {
            background: var(--warn-bg);
            color: var(--warn);
            border: 1px solid var(--warn-line);
        }

        .status.failed {
            background: var(--bad-bg);
            color: var(--bad);
            border: 1px solid var(--bad-line);
        }

        /* Section cards */
        .section {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 12px;
            margin-bottom: 16px;
            overflow: hidden;
        }

        .section.hidden-water-contour {
            display: none;
        }

        .section > summary {
            list-style: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 22px;
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--ink-heading);
            user-select: none;
        }

        .section > summary::-webkit-details-marker {
            display: none;
        }

        .section > summary .chevron {
            color: var(--accent);
            font-size: 0.9rem;
            transition: transform 0.15s ease;
        }

        .section[open] > summary .chevron {
            transform: rotate(180deg);
        }

        .section > summary:hover {
            background: var(--card-hover);
        }

        .section-body {
            padding: 4px 22px 22px;
        }

        /* Boxed fields with label inset in the border */
        .field-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            /* start, а не stretch по умолчанию: иначе ячейка тянется под высоту
               соседа, и пустое поле рядом с полем, у которого три строки
               подсказки, вырастает вдвое. Пустая коробка двойной высоты
               читается как большое текстовое поле, хотя это строка ввода. */
            align-items: start;
        }

        .field-grid + .field-grid {
            margin-top: 16px;
        }

        .field {
            position: relative;
            border: 1.5px solid var(--line-2);
            border-radius: 8px;
            padding: 9px 14px 8px;
            background: var(--card);
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }

        .field.full {
            grid-column: 1 / -1;
        }

        .field label {
            display: block;
            font-size: 12px;
            font-weight: 500;
            color: var(--ink-label);
            margin-bottom: 2px;
        }

        .field input,
        .field textarea,
        .field select {
            /* tasks/CDW-UXFORM-03: scrollIntoView({block:'center'}) alone
               centers a field against the FULL viewport height, which does
               not account for the fixed .action-panel eating into the
               bottom -- on a short-enough viewport the field still lands
               partially behind it (measured directly via
               getBoundingClientRect during this task's own visual QA: a
               983px-tall viewport left the field ~43px behind the panel).
               scroll-margin-bottom is honored by scrollIntoView natively,
               keeps this much clearance from the viewport's bottom edge
               regardless of centering math, and tracks the panel's REAL
               height via the same --action-panel-height variable the body
               padding uses. */
            scroll-margin-bottom: calc(var(--action-panel-height, 150px) + 16px);
            display: block;
            width: 100%;
            border: none;
            border-bottom: 1px solid var(--line-2);
            outline: none;
            padding: 4px 0 3px;
            font-size: 16px;
            font-family: inherit;
            color: var(--ink);
            background: transparent;
        }

        .field select {
            cursor: pointer;
        }

        /* AIR-CURTAINS-QUICK-SELECTION-UX-01: same specificity bug already
           documented and fixed for .app-breadcrumbs[hidden] elsewhere in
           this file (see that comment, ~line 450) -- `.field select` above
           is an author rule with `display: block`, which has the same
           specificity as the UA default `[hidden] { display: none }` and
           wins by being an author rule, so plain `hidden` on
           #object_requirement_profile/#requirement_block_id never actually
           hid them (confirmed live: the picker dialog's own trigger button
           rendered with the raw <select> still fully visible right below
           it). `.field select[hidden]` has higher specificity (0,2,0 vs
           0,1,0) so this wins without `!important`. */
        .field select[hidden] {
            display: none;
        }

        .field:focus-within {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
        }

        .field.has-value {
            border-color: var(--accent);
        }

        .field .field-error {
            display: none;
            font-size: 12px;
            color: var(--invalid);
            margin-top: 4px;
        }

        .field.invalid {
            border-color: var(--invalid);
        }

        .field.invalid .field-error {
            display: block;
        }

        .field .field-hint {
            font-size: 12px;
            color: var(--muted);
            margin-top: 4px;
        }

        .field-actions {
            margin-top: 8px;
            font-size: 12px;
        }

        .field-actions a {
            color: var(--link);
            text-decoration: none;
        }

        .field-actions button {
            margin-left: 10px;
            font-size: 12px;
            padding: 3px 8px;
            border: 1px solid var(--line-2);
            border-radius: 4px;
            background: var(--surface);
            cursor: pointer;
        }

        #profile-status-indicator {
            margin-top: 6px;
            font-size: 12px;
            display: none;
        }

        .buttons {
            display: flex;
            gap: 12px;
            margin-top: 8px;
            flex-wrap: wrap;
        }

        .action-panel {
            /* AIR-CURTAINS-MANUAL-SELECTION-ACTION-PANEL-01: was
               `position: fixed` + a body padding-bottom chasing its
               measured height -- that only ever protected the ONE field
               you scrollIntoView'd to, not everything a user scrolls PAST
               on the way there (real, measured overlap -- see
               tests_browser/test_action_panel_real_overlap.py and this
               task's CURRENT_STATE.md section J). Now a normal flex row,
               the last child of body.ac-standalone-shell (or a plain
               static block when embedded in the заявка/opening workspace
               fragment, where body.ac-standalone-shell is absent by
               construction -- see the HTML comment above <main
               class="ac-scroll-main"> in the template). main's own bounded
               height + overflow-y:auto means nothing can render under
               this panel any more; no overlap-prevention padding math
               needed. */
            width: 100%;
            max-width: 960px;
            margin: 0 auto;
            flex: 0 0 auto;
            padding: 12px;
            padding-bottom: calc(12px + env(safe-area-inset-bottom));
            align-items: center;
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 12px;
            box-shadow: var(--shadow);
        }

        /* Only meaningful inside body.ac-standalone-shell (the panel is a
           flex sibling of <main> there, see below) -- harmless no-op when
           embedded in the workspace fragment, where .action-panel is a
           plain block and this selector simply doesn't match anything
           relevant. */
        body.ac-standalone-shell {
            display: flex;
            flex-direction: column;
            height: 100dvh;
            overflow: hidden;
        }

        body.ac-standalone-shell > .app-header,
        body.ac-standalone-shell > .app-breadcrumbs,
        body.ac-standalone-shell > .container {
            flex: 0 0 auto;
        }

        /* Pre-existing bug, exposed (not caused) by the bounded-flex layout.
           CORRECTED 2026-09-04 (independent review caught the original
           version of this comment misattributing the conflicting rule to
           the SHARED static/air_curtains.css -- wrong: this page doesn't
           even link that file, see the comment at line ~864 above
           explaining why. The real conflicting rule is `.app-breadcrumbs`
           right in THIS file, duplicated here for that same reason).
           This file's own `.app-breadcrumbs { display: flex; }` (below)
           has the same specificity as the UA `[hidden] { display: none }`
           default and, being an author rule, always wins regardless of
           source order -- so the `hidden` attribute never actually hid
           this element (same bug class as the one documented in
           tests_browser/test_workspace_tabs.py's docstring, 2026-08-07,
           found in a different component). Harmless when body scrolled
           normally (just an empty ~22px gap nobody noticed); now that
           body.ac-standalone-shell bounds the header region, that phantom
           space measurably eats into main's flex budget on short
           viewports. `.app-breadcrumbs[hidden]` has higher specificity
           (0,2,0 vs 0,1,0) so this wins without `!important`, and it's a
           self-contained fix within this same file. */
        .app-breadcrumbs[hidden] {
            display: none;
        }

        body.ac-standalone-shell > .ac-scroll-main {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
        }

        body.ac-standalone-shell > .action-panel {
            flex: 0 0 auto;
        }

        .action-panel #submit-btn {
            flex: 0 1 auto;
        }

        .action-panel #status-message {
            flex: 1 1 240px;
            min-width: 0;
            max-height: 64px;
            color: var(--muted);
            text-align: center;
            overflow-y: auto;
            overflow-wrap: anywhere;
        }

        .action-panel #status-message .status,
        .action-panel #status-message .profile-warning {
            margin: 0;
            padding: 8px 10px;
        }

        .action-panel .spinner {
            flex: 1 1 240px;
            padding: 0;
        }

        .action-panel .spinner.show {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 4px;
        }

        .action-panel .spinner p {
            margin-inline-start: 4px;
        }

        button, .btn-link, .btn-tertiary {
            padding: 13px 22px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s ease, transform 0.1s ease;
        }

        button:active, .btn-link:active, a.btn-tertiary:active {
            transform: scale(0.96);
        }

        .btn-primary {
            background: var(--accent);
            color: white;
            flex: 1;
        }

        .btn-primary:hover {
            background: var(--accent-hover);
        }

        .btn-primary:disabled {
            background: var(--accent-disabled);
            cursor: not-allowed;
        }

        .btn-secondary {
            background: var(--line);
            color: var(--ink-2);
        }

        .btn-secondary:hover {
            background: var(--line-2);
        }

        .btn-tertiary {
            background: var(--info-bg);
            color: var(--info);
        }

        .btn-tertiary:hover {
            background: var(--info-bg-hover);
        }

        a.btn-tertiary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }

        .spinner {
            display: none;
            text-align: center;
            padding: 20px;
        }

        .spinner.show {
            display: block;
        }

        .spinner div {
            width: 20px;
            height: 20px;
            background: var(--accent);
            border-radius: 50%;
            display: inline-block;
            margin: 0 5px;
        }

        /* The loop must still say "working" under reduced motion, so it
           isn't simply removed -- a bounce (repeated scale) is exactly the
           kind of motion that preference exists to opt out of, so it's
           gated behind no-preference and replaced with a plain opacity
           pulse otherwise (still communicates progress, no repeated
           scaling). */
        @media (prefers-reduced-motion: no-preference) {
            .spinner div {
                animation: bounce 1.4s infinite ease-in-out both;
            }

            .spinner div:nth-child(1) {
                animation-delay: -0.32s;
            }

            .spinner div:nth-child(2) {
                animation-delay: -0.16s;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .spinner div {
                animation: pulse 1.4s infinite ease-in-out both;
            }

            .spinner div:nth-child(1) {
                animation-delay: -0.32s;
            }

            .spinner div:nth-child(2) {
                animation-delay: -0.16s;
            }
        }

        @keyframes bounce {
            0%, 80%, 100% {
                transform: scale(0);
            }
            40% {
                transform: scale(1);
            }
        }

        @keyframes pulse {
            0%, 80%, 100% {
                opacity: 0.25;
            }
            40% {
                opacity: 1;
            }
        }

        /* 820, а не 600: при 700px в двух колонках на поле остаётся около
           300px, и «RAL 7004 — сигнальный серый (стандарт)» в селекте
           обрезается на половине. Порог поднят до той же ширины, на которой
           складывается шапка. */
        @media (max-width: 820px) {
            .field-grid {
                grid-template-columns: 1fr;
            }

            .buttons {
                flex-direction: column;
            }

            button, .btn-link, .btn-tertiary {
                width: 100%;
            }

            .action-panel {
                gap: 8px;
                padding: 10px;
                padding-bottom: calc(10px + env(safe-area-inset-bottom));
            }

            .action-panel #status-message,
            .action-panel .spinner {
                flex-basis: auto;
                width: 100%;
            }

            .action-panel .spinner div {
                width: 14px;
                height: 14px;
            }
        }

        /* Profile status indicators */
        .profile-status-draft {
            color: var(--bad);
            background-color: var(--bad-bg);
            border: 1px solid var(--bad-line);
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: 600;
        }

        .profile-status-needs_review {
            color: var(--warn);
            background-color: var(--warn-bg);
            border: 1px solid var(--warn-line);
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: 600;
        }

        .profile-status-approved {
            color: var(--ok);
            background-color: var(--ok-bg);
            border: 1px solid var(--ok-line);
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: 600;
        }

        .profile-status-rejected {
            color: var(--bad);
            background-color: var(--bad-bg);
            border: 1px solid var(--bad-line);
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: 600;
        }

        .profile-status-archived {
            color: var(--archived);
            background-color: var(--archived-bg);
            border: 1px solid var(--archived-line);
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: 600;
        }

        .profile-warning {
            color: var(--bad);
            background-color: var(--bad-bg);
            border: 1px solid var(--bad-line);
            padding: 8px;
            border-radius: 4px;
            margin: 10px 0;
            font-weight: 600;
        }

        /* Requirements preview (v1.2) */
        #requirements-preview-block {
            margin-top: 16px;
            padding: 16px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: var(--surface);
        }
        /* h2, not h3: matches the requirements-preview heading's actual tag
           in templates/air_curtains_project.html (kept at h2 to not skip a
           level after the page's single h1 -- an a11y fix on this branch).
           Visual size unchanged (still 1rem). */
        #requirements-preview-block h2 {
            font-size: 1rem;
            margin-bottom: 10px;
        }
        .req-block-actions {
            display: flex;
            align-items: center;
            gap: 14px;
            margin: 4px 0 10px;
        }
        .req-block-actions button {
            font-size: 0.85rem;
            padding: 5px 10px;
            border: 1px solid var(--line-2);
            border-radius: 6px;
            background: white;
            cursor: pointer;
        }
        .req-block-actions button:hover {
            background: var(--surface-2);
        }
        .req-block-actions a {
            font-size: 0.85rem;
        }
        .req-block-sections {
            margin: 4px 0 10px;
            padding: 8px 10px;
            background: white;
            border: 1px solid var(--line);
            border-radius: 6px;
        }
        .req-section-line {
            font-size: 0.85rem;
            color: var(--ink-2);
            margin: 3px 0;
        }
        .req-status-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 999px;
            font-weight: 600;
            font-size: 0.85rem;
            margin-bottom: 10px;
        }
        .req-status-ok {
            color: var(--ok);
            background-color: var(--ok-bg);
            border: 1px solid var(--ok-line);
        }
        .req-status-warning {
            color: var(--warn);
            background-color: var(--warn-bg);
            border: 1px solid var(--warn-line);
        }
        .req-status-blocked {
            color: var(--bad);
            background-color: var(--bad-bg);
            border: 1px solid var(--bad-line);
        }
        .req-source-line {
            font-size: 0.85rem;
            color: var(--ink-3);
            margin-bottom: 4px;
        }
        .req-merged-list {
            margin: 8px 0 8px 20px;
            font-size: 0.9rem;
        }
        .req-duplicates-note {
            font-size: 0.82rem;
            color: var(--muted);
            margin-bottom: 8px;
        }
        .req-conflict-item {
            border-radius: 6px;
            padding: 10px 12px;
            margin-bottom: 8px;
            font-size: 0.88rem;
        }
        .req-conflict-item.blocked {
            background: var(--bad-bg);
            border: 1px solid var(--bad-line);
        }
        .req-conflict-item.warning {
            background: var(--warn-bg);
            border: 1px solid var(--warn-line);
        }
        .req-conflict-item .req-conflict-title {
            font-weight: 600;
            margin-bottom: 4px;
        }
        .req-conflict-item .req-conflict-action {
            color: var(--ink-3);
            margin-top: 4px;
        }
        .req-preview-loading, .req-preview-error {
            font-size: 0.9rem;
            color: var(--muted);
        }
        .req-preview-error {
            color: var(--bad);
        }
        .selection-context-banner {
            margin-bottom: 16px;
            padding: 12px 14px;
            border-radius: 8px;
            background: var(--slate-50);
            color: var(--slate-700);
            font-size: 0.9rem;
        }

        .selection-context-banner a { color: var(--blue-600); }

        .technical-source {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px 10px;
            margin-top: 5px;
            color: var(--slate-500);
            font-size: 0.78rem;
        }

        .technical-reset {
            min-height: 24px;
            padding: 1px 5px;
            border: 0;
            background: transparent;
            color: var(--blue-600);
            text-decoration: underline;
            cursor: pointer;
        }

        .technical-reset:focus-visible {
            outline: 2px solid var(--blue-600);
            outline-offset: 2px;
        }

        /* Хлебные крошки. Дублируются здесь по той же причине, что и
           .app-header выше: эта страница намеренно не линкует
           static/air_curtains.css (полный пакет ломает ей кнопки). */
        .app-breadcrumbs {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 8px;
            margin: 0 auto 20px;
            max-width: 1200px;
            padding: 10px 16px;
            background: var(--card, #fff);
            border: 1px solid var(--line, #e2e8f0);
            border-radius: 10px;
            font-size: 13.5px;
        }

        .app-breadcrumbs .crumb {
            color: var(--accent, #2e7d32);
            text-decoration: none;
            font-weight: 600;
        }

        .app-breadcrumbs .crumb:hover { text-decoration: underline; }

        .app-breadcrumbs .crumb-current {
            color: var(--text, #0f172a);
            font-weight: 600;
        }

        .app-breadcrumbs .crumb-kind {
            color: var(--muted, #64748b);
            font-weight: 400;
            margin-right: 4px;
        }

        .app-breadcrumbs .crumb-sep { color: var(--muted, #64748b); }

        /* AIR-CURTAINS-QUICK-SELECTION-UX-01 (SPEC п.3): compact current-value
           readout replacing the visible native <select> for
           object_requirement_profile/requirement_block_id -- the select
           itself is `hidden` and stays the real form control. */
        .picker-trigger {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            padding: 10px 12px;
            border: 1px solid var(--line, #e2e8f0);
            border-radius: 8px;
            background: var(--bg, #f8fafc);
        }

        .picker-current-value {
            font-weight: 600;
            color: var(--text, #0f172a);
        }

        /* Wide picker dialog -- was previously "the native <select>'s own
           dropdown", cramped and offering no room for a status badge or
           description per item. min(880px, 92vw) fills most of the
           viewport on the narrower screens from the task's own screenshots
           without becoming unreadably wide on desktop. */
        .picker-dialog {
            width: min(880px, 92vw);
            max-height: min(720px, 88vh);
            padding: 0;
            border: 1px solid var(--line, #e2e8f0);
            border-radius: 14px;
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
        }

        .picker-dialog::backdrop {
            background: rgba(15, 23, 42, 0.45);
        }

        .picker-dialog-inner {
            display: flex;
            flex-direction: column;
            max-height: min(720px, 88vh);
        }

        .picker-dialog header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 18px 22px;
            border-bottom: 1px solid var(--line, #e2e8f0);
        }

        .picker-dialog header h2 {
            font-size: 1.15rem;
            margin: 0;
        }

        .picker-close {
            background: none;
            border: none;
            font-size: 1.4rem;
            line-height: 1;
            cursor: pointer;
            color: var(--muted, #64748b);
            padding: 4px 8px;
        }

        .picker-current {
            margin: 0;
            padding: 12px 22px 0;
            color: var(--muted, #64748b);
            font-size: 0.92rem;
        }

        .picker-list {
            flex: 1;
            overflow-y: auto;
            padding: 14px 22px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .picker-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 12px 14px;
            border: 1px solid var(--line, #e2e8f0);
            border-radius: 10px;
            text-align: left;
            background: var(--card, #fff);
            cursor: pointer;
            font: inherit;
            width: 100%;
        }

        .picker-item:hover,
        .picker-item:focus-visible {
            border-color: var(--accent, #2e7d32);
            background: var(--bg, #f8fafc);
        }

        .picker-item.is-selected {
            border-color: var(--accent, #2e7d32);
            box-shadow: inset 0 0 0 1px var(--accent, #2e7d32);
        }

        .picker-item-label {
            font-weight: 600;
        }

        .picker-item-meta {
            color: var(--muted, #64748b);
            font-size: 0.85rem;
            margin-top: 2px;
        }

        .picker-empty {
            color: var(--muted, #64748b);
            padding: 20px;
            text-align: center;
        }

        .picker-dialog footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 16px 22px;
            border-top: 1px solid var(--line, #e2e8f0);
        }

        @media (max-width: 640px) {
            .picker-dialog footer {
                flex-direction: column;
                align-items: stretch;
            }
        }