/* ============================================================
   Пропозиції виправлення атрибутів — RECRE-546.

   ЧОМУ ОКРЕМИЙ ФАЙЛ, А НЕ main.css: правка main.css заблокована
   паралельним незакоміченим WIP — той самий випадок і та сама причина,
   що дали notification-optin.css, photo-suggestions.css і
   poi-suggestions.css (див. коментар у base.html). Перевизначень
   наявних селекторів тут немає, лише нові класи .asg-*, тож
   перенесення буде механічним.

   ЧОМУ НЕ ДОПИСАЛИ В poi-suggestions.css, який теж «про пропозиції»:
   той файл належить RECRE-545 і описує ІНШУ форму (Leaflet-пікер,
   дедуплікаційна підказка). Спільним у трьох фіч є лише список
   кабінету, і його класи (.psl-*) саме тому перевикористані як є, без
   жодного рядка тут — рівно так, як RECRE-545 повівся з .psl-* фото.

   Токени — з main.css (:root). Власної палітри файл не вводить.
   ============================================================ */

/* Та сама ширина, що .psg-card/.fbk-card: усі поля однорядкові, а
   довша колонка тексту в textarea читається гірше, не краще. */
.asg-card { max-width: 560px; }

/* ------------------------------------------------------------
   Блок структурованих полів
   ------------------------------------------------------------ */

/* fieldset, а не div: шість полів «що виправити» — це одна логічна
   група з одним питанням, і скрінрідер має прочитати legend перед
   кожним з них. Дефолтну рамку/відступи fieldset гасимо — вигляд дає
   рамка нижче, узгоджена з .psg-pick. */
.asg-fields {
    margin: 0;
    padding: 14px;
    border: 1px solid var(--border-2);
    border-radius: 14px;
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Легенда — ВСЕРЕДИНІ рамки, а не на її межі (правка ПВ 2026-09-19,
   RECRE-572: заголовок сидів верхи на верхній лінії fieldset і рвав
   заокруглений кут — виміряно, legend.top збігався з fieldset.top).
   float робить legend звичайним потоковим дочірнім елементом (штатний
   механізм HTML-рендерингу legend, а не хак), і він стає першим рядком
   картки — тим самим патерном «заголовок над вмістом», яким живуть
   .psel__label та .asg-row__label решти форм каналу. */
.asg-fields__legend {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--muted-2);
}

.asg-fields__hint { margin: 0; }

.asg-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Назва поля і поточне значення — в один рядок з переносом: на
   десктопі «Велодоріжки … зараз: ні» читається як одне твердження, на
   вузькому екрані розпадається на два рядки без жодних медіа-запитів.
   space-between (правка ПВ 2026-09-19, RECRE-572) розводить їх по
   краях рядка: раніше «зараз: …» тулилося до підпису через 10px і
   зливалося з ним в один невиразний рядок. */
.asg-row__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 10px;
}

.asg-row__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--muted-2);
}

/* Поточне значення — тихий чип-довідка, а не підпис поля (правка ПВ
   2026-09-19: голий сірий текст поруч з uppercase-підписом читався
   як його продовження). Рецепт чипа — .psg-pick__coords тієї ж
   родини форм, лише без тіні й іконки: це фонова довідка, не статус. */
.asg-row__current {
    padding: 2px 9px;
    border: 1px solid var(--border-2);
    border-radius: 999px;
    background: var(--surface-1);
    font-size: 11.5px;
    color: var(--muted-2);
    /* Без white-space: nowrap — поточні «години роботи» бувають цілим
       реченням, і чип має право перенестись, а не розсунути картку. */
    line-height: 1.5;
}

/* ------------------------------------------------------------
   Тристан «Не змінюю / Так / Ні»
   ------------------------------------------------------------ */

.asg-tristate {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Пілюля з радіо всередині. Сам input лишається видимим (а не
   схований під :checked-стилі мітки): три варіанти в ряд без крапки
   легко прочитати як три кнопки-перемикачі, де натиснуто всі, а
   рідна радіокрапка знімає це питання без жодного JS і без ризику
   загубити фокус-стан для клавіатури. */
.asg-tristate__option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #e2d3b4;
    border-radius: 999px;
    background: var(--surface-1);
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.asg-tristate__option:hover { border-color: var(--sage); }

.asg-tristate__option input { margin: 0; accent-color: var(--sage); }

/* :has() підтримують усі цільові браузери проєкту; там, де ні,
   пілюля просто не підсвічується — обраний варіант однаково видно по
   самій радіокрапці, тобто деградація тиха й нешкідлива. */
.asg-tristate__option:has(input:checked) {
    border-color: var(--sage);
    background: rgba(126, 148, 102, 0.14);
    font-weight: 600;
}

.asg-tristate__option:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(126, 148, 102, 0.18);
}

/* ------------------------------------------------------------
   Дрібниці форми і підтвердження
   ------------------------------------------------------------ */

/* Рядок «заявка нічого не змінює автоматично» — іконка й текст по
   базовій лінії першого рядка, не по центру блоку. */
.asg-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
}

.asg-note i,
.asg-note svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }

.asg-done__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

@media (max-width: 520px) {
    /* Три кнопки підтвердження в рядок на телефоні дають три обрізані
       написи — той самий висновок і те саме рішення, що в
       .psg-done__actions. */
    .asg-done__actions { flex-direction: column; }
    .asg-done__actions .pdc-btn { justify-content: center; }
}