/* ============================================================
   UX-правки каналу пропозицій — RECRE-555.

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

   ЧОМУ НЕ ДОПИСАЛИ В ОДИН ІЗ ТИХ ТРЬОХ: кожен із них належить СВОЇЙ
   фічі (541 / 545 / 546), а класи звідси спільні для всіх трьох
   (селектор парку, кнопка файлу, заглушка незалогіненого). Покласти
   спільне в будь-який один означало б зробити дві інші форми
   залежними від чужого файла.

   Перевизначень наявних селекторів немає — лише нові .psel-* / .sgt-* /
   .ppf-*. Токени — з main.css (:root).
   ============================================================ */

/* ------------------------------------------------------------
   1. Двокроковий селектор парку (.psel-*)
   ------------------------------------------------------------ */

.psel__step + .psel__step { margin-top: 12px; }

.psel__label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
}

/* Номер кроку — не декорація: він єдиний пояснює, чому друге поле
   спершу вимкнене (крок 2 недоступний, доки не пройдено крок 1). */
.psel__num {
    flex: none;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--green);
    color: var(--bg);
    font-size: 11.5px;
    font-weight: 800;
}

.psel__select,
.psel__input {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: 14.5px;
}

.psel__select:focus-visible,
.psel__input:focus-visible {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(126, 148, 102, .3);
}

.psel__input:disabled {
    background: var(--surface-2);
    color: var(--muted-3);
    cursor: not-allowed;
}

.psel__combo { position: relative; }

/* Хрестик усередині поля: padding-right інпута не чіпаємо — текст
   назви парку короткий, а перекриття хрестиком трапляється рідше, ніж
   коштувало б окреме правило ширини. */
.psel__clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--muted-2);
    cursor: pointer;
}

.psel__clear:hover { background: var(--bg-2); color: var(--ink-2); }
.psel__clear i, .psel__clear svg { width: 15px; height: 15px; }

.psel__list {
    position: absolute;
    /* 1300, а не 30 (бага ПВ 2026-09-17): на формі заявки на точку під
       пікером лежить Leaflet-схема (.psg-pick), а її нутро живе У ТОМУ Ж
       контексті нанизування. Виміряні пороги (живцем, elementFromPoint):
       панелі Leaflet 200–700; .leaflet-top/.leaflet-bottom (зум,
       атрибуція) — 1000 (штатний leaflet.css); тумблер «Супутник»
       .mloc-pick__layer — 1200 (main.css). Списки підказок мусять бути
       над УСІМА контролами карти → 1300. */
    z-index: 1300;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 264px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}

/* ---- Власний дропдаун «Напрямок» (правка ПВ 2026-09-17) ----
   Нутро нативного select не стилізується — розкритий системний список
   випадав із дизайну. Кнопка успадковує рамку/типографіку .psel__select,
   список — рецепт .psel__list вище (той самий z-index над Leaflet). */
.psel__dd { position: relative; }

.psel__dd-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.psel__dd-btn i, .psel__dd-btn svg {
    width: 16px; height: 16px; flex: none; color: var(--muted);
}
.psel__dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.psel__dd-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psel__dd-value--ph { color: var(--muted); }

.psel__dd-list {
    position: absolute;
    z-index: 1300; /* ті самі виміряні пороги, що .psel__list вище */
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}

/* Заголовок області — фонова смуга на всю ширину списку (RECRE-573,
   п.3: раніше він відрізнявся від рядків вибору лише розміром літер, і
   довгий список читався як однорідна колонка). Смуга ламає ритм рядків
   і працює розділювачем між областями — окрема лінія не потрібна.
   Від'ємні поля з'їдають внутрішній padding 4px списку. */
.psel__dd-group {
    margin: 6px -4px 2px;
    padding: 8px 14px;
    background: var(--surface-2);
    border-top: 1px solid var(--border-2);
    border-bottom: 1px solid var(--border-2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted-2);
}
/* Перша смуга прилягає до верху списку — добираємо його радіус */
.psel__dd-group:first-child {
    margin-top: -4px;
    border-top: none;
    border-radius: 9px 9px 0 0;
}

.psel__dd-opt {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
}

/* Місто — основний рядок вибору: маркер-крапка робить його візуально
   «пунктом списку» області, а не ще одним заголовком (RECRE-573, п.3:
   міста плутались із назвами областей). */
.psel__dd-opt--child {
    position: relative;
    padding-left: 26px;
}
.psel__dd-opt--child::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sage);
}

/* «Область — усі парки» — вторинний рядок області, а не її дубль
   акцентним зеленим (RECRE-573, п.3): приглушений і трохи дрібніший,
   він читається як дія «взяти всю область», а міста під ним — як
   основний вибір. Зелений лишився станам hover/selected нижче. */
.psel__dd-opt--all {
    font-size: 13px;
    color: var(--muted);
}
.psel__dd-opt--all:hover, .psel__dd-opt--all.is-active { color: var(--ink); }

.psel__dd-opt:hover, .psel__dd-opt.is-active { background: var(--bg-2); }
.psel__dd-opt.is-selected { color: var(--green); font-weight: 700; }
.psel__dd-opt.is-selected::after { content: " ✓"; }

.psel__opt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 10px;
    border-radius: 9px;
    cursor: pointer;
}

/* Один стан підсвітки на клавіатуру і мишу (@mouseenter теж пише
   activeIndex) — інакше ховер і стрілки малювали б дві різні «поточні»
   підказки одночасно. */
.psel__opt.is-active { background: var(--bg-2); }

.psel__opt-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.psel__opt-meta { font-size: 12px; color: var(--muted); }

.psel__empty {
    padding: 10px;
    font-size: 13px;
    color: var(--muted);
}

.psel__chosen {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--green);
}

.psel__chosen i, .psel__chosen svg { width: 14px; height: 14px; flex: none; }

/* ------------------------------------------------------------
   2. Кнопка вибору файлу (.ppf-*)
   ------------------------------------------------------------ */

/* Інпут прихований ВІЗУАЛЬНО, а не display:none: display:none виймає
   його з порядку фокуса, і клавіатурний користувач втрачає єдиний
   спосіб відкрити діалог файлів. Класичний clip-прийом лишає елемент у
   дереві доступності, а видимий стан фокуса малює .ppf-btn через
   :focus-within. */
.ppf-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ppf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* <label>, а не <button>: клік по мітці штатно відкриває діалог
   схованого інпута без жодного рядка JS. Вигляд — .pdc-btn--secondary
   дизайн-системи, повторений тут, бо label не є кнопкою і класи кнопок
   на нього не розраховані (min-height 44px — мобільна мішень). */
.ppf-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--green);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}

.ppf-btn:hover { background: var(--bg-2); }
.ppf-btn i, .ppf-btn svg { width: 16px; height: 16px; flex: none; }

/* Фокус у схованого інпута — видимий на мітці (див. коментар вище) */
.ppf:focus-within .ppf-btn {
    outline: none;
    box-shadow: 0 0 0 3px rgba(126, 148, 102, .35);
}

.ppf-name {
    min-width: 0;
    flex: 1 1 140px;
    font-size: 13px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppf-name--set { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------
   3. Заглушка незалогіненого (.sgt-*)
   ------------------------------------------------------------ */

.sgt-guest { max-width: 560px; }

.sgt-guest__why {
    display: flex;
    gap: 12px;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(126, 148, 102, .38);
    border-radius: 14px;
    background: rgba(126, 148, 102, .08);
}

.sgt-guest__why > i,
.sgt-guest__why > svg {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 2px;
    color: var(--green);
}

.sgt-guest__why-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.sgt-guest__why-text {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
}

.sgt-guest__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

/* ------------------------------------------------------------
   4. Точки входу кабінету — секція «Мій внесок» (.ctrb-*)
   ------------------------------------------------------------ */

/* RECRE-594 (ТЗ Дизайнера §6). Колишня .acct-support__links — обгортка
   чотирьох однакових пілюль усередині ДРУГОЇ картки .acct-support —
   більше не існує: блок став власною секцією кабінету. Правило
   .acct-support__links і його рядок у медіа-запиті 520px видалені
   разом із розміткою. У тому самому медіа-запиті лишається
   .sgt-guest__actions .pdc-btn — він обслуговує гостьову сторінку
   suggestion_guest.html і до кабінету стосунку не має. */

@media (max-width: 520px) {
    .sgt-guest__actions .pdc-btn { flex: 1 1 100%; justify-content: center; }
}

/* САМОДОСТАТНЯ ОБОЛОНКА. Поверхня — тінт сторінки --bg-2, а НЕ
   матеріал картки --surface: інакше блок знову читався б як «ще одна
   картка» на кшталт підтримки (вихідна скарга ПВ). Плитки всередині
   лишаються на --surface, тож виходить «ділянка сторінки зі
   звичайними картками», а не картка в картці.
   Пунктирний border-top тут БУВ у редакції 1 і його ПРИБРАНО — він
   об'єднував «Мої локації» з внеском замість розділяти (§0.5).
   Не повертати. Відступи 44/26 — головний носій самостійності:
   сусідні секції кабінету мають margin-top 40 і жодного власного
   фону, тож 44 px чистого поля плюс рамка читаються однозначно. */
.ctrb-section {
    margin: 44px 0 26px; padding: 20px 20px 22px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 22px;
}
.ctrb-section__head {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap; margin-bottom: 8px;
}
/* Орб — шавлієвий градієнт .fbk-done .acct-orb (suggestion-ux.css),
   а НЕ охряний .acct-orb: охра в кабінеті зайнята орбом сторінок-
   карток, і однаковий знак на різних рівнях плутав би. */
.ctrb-section__orb {
    flex: none; width: 42px; height: 42px; border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, var(--sage-light), var(--sage) 75%);
    display: flex; align-items: center; justify-content: center;
}
.ctrb-section__orb i, .ctrb-section__orb svg {
    width: 20px; height: 20px; color: var(--surface-2);
}
.ctrb-section__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 24px; font-weight: 700; color: var(--green); margin: 0;
}
/* Правила на іконку підзаголовка немає: її тут немає (§4, нотатка 3) */
.ctrb-section__sub {
    margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: var(--muted-2);
}

/* auto-fit + minmax(176px) дає РІВНО 3 колонки всередині оболонки
   (640 - 40 padding = 600px -> 3x193px) і 1 колонку на телефоні
   (315 - 28 = 287px корисної ширини: двом колонкам треба 362px) —
   без жодного медіа-запиту на саму сітку. Поріг 176px тримає 3
   колонки і в оболонці (600px), і без неї (640px); запас до зриву
   на 2 колонки — 17px, тож звужувати padding оболонки не можна. */
.ctrb-grid {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
}

/* Матеріал .mloc-item (surface / border-2 / radius 18 / та сама тінь),
   але розкладка вертикальна: це не рядок сутності, а вхід у форму. */
.ctrb-tile {
    display: flex; flex-direction: column; gap: 7px;
    padding: 14px 14px 15px; min-width: 0;
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 18px; text-decoration: none;
    box-shadow: 0 14px 30px -26px rgba(47,74,55,0.45);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ctrb-tile:hover {
    transform: translateY(-2px); border-color: var(--border);
    box-shadow: 0 20px 38px -26px rgba(47,74,55,0.5);
}
.ctrb-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }
.ctrb-tile__orb {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    background: var(--chip-amenity-bg);
    display: flex; align-items: center; justify-content: center;
}
.ctrb-tile__orb i, .ctrb-tile__orb svg {
    width: 18px; height: 18px; color: var(--chip-amenity-fg);
}
.ctrb-tile__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ctrb-tile__label {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 18px; font-weight: 700; color: var(--green); line-height: 1.2;
}
.ctrb-tile:hover .ctrb-tile__label { color: var(--green-hover); }
.ctrb-tile__hint { font-size: 12px; line-height: 1.45; color: var(--muted-2); }

/* Смуга «Мої пропозиції» — НЕ четверта плитка: це не внесок, а
   перегляд рішень. Інша розкладка (рядок) і інший матеріал
   (surface-2) роблять різницю читабельною без жодного підпису. */
.ctrb-status {
    display: flex; align-items: center; gap: 12px;
    margin-top: 12px; padding: 12px 14px;
    background: var(--surface-2); border: 1px solid var(--border-2);
    border-radius: 18px; text-decoration: none; color: inherit;
    transition: background .15s ease, border-color .15s ease;
}
.ctrb-status:hover { background: var(--bg-2); border-color: var(--border); }
.ctrb-status:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }
.ctrb-status__icon {
    flex: none; width: 36px; height: 36px; border-radius: 50%;
    background: var(--bg-2); display: flex; align-items: center; justify-content: center;
}
.ctrb-status__icon i, .ctrb-status__icon svg {
    width: 17px; height: 17px; color: var(--muted-2);
}
.ctrb-status__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ctrb-status__title { font-size: 14px; font-weight: 800; color: var(--green); }
.ctrb-status__text { font-size: 12.5px; line-height: 1.5; color: var(--muted-2); }
.ctrb-status__go {
    flex: none; font-size: 12.5px; font-weight: 800; color: var(--green);
    border: 1px solid var(--border); border-radius: 30px;
    padding: 7px 14px; background: var(--surface);
}
.ctrb-status:hover .ctrb-status__go { background: var(--surface-2); }

/* Порожнеча — та сама смуга пунктиром, без дії і без hover. */
.ctrb-status--empty {
    background: transparent; border-style: dashed; border-color: var(--dash);
}
.ctrb-status--empty:hover { background: transparent; border-color: var(--dash); }
.ctrb-status--empty .ctrb-status__title { color: var(--muted); }

@media (max-width: 680px) {
    /* Оболонка стискається, але лишається: саме вона на телефоні й
       робить видимим, що тут починається інший блок сторінки. */
    .ctrb-section { margin: 32px 0 22px; padding: 16px 14px 18px; }
    .ctrb-section__orb { width: 38px; height: 38px; }
    .ctrb-section__orb i, .ctrb-section__orb svg { width: 18px; height: 18px; }
    /* Плитка лягає рядком: три вертикальні плитки поспіль з'їли б
       цілий екран телефона і відсунули б підтримку за дві гортання. */
    .ctrb-tile { flex-direction: row; align-items: center; gap: 12px; padding: 12px; }
    .ctrb-tile__orb { width: 40px; height: 40px; }
    .ctrb-tile__label { font-size: 17px; }
    .ctrb-status { flex-wrap: wrap; }
    .ctrb-status__go { width: 100%; text-align: center; }
    .ctrb-status--empty .ctrb-status__icon { align-self: flex-start; }
}

/* ------------------------------------------------------------
   5. Фото до заявки на точку (.psg-photos-*)
   ------------------------------------------------------------ */

.psg-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.psg-photos__item {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-2);
    background: var(--surface-2);
}

.psg-photos__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ------------------------------------------------------------
   5. Гостьовий вигляд трьох кнопок-входів (.pdc-suggest--guest)

   Правка ПВ (2026-09-16, п.4): виправлення/точка/фото на /park/{slug}/
   і в overlay /map/ виглядали для гостя й авторизованого ІДЕНТИЧНО —
   гейт спрацьовував лише на destination-сторінці. «Зберегти парк» і
   «У список» поруч уже мають виразний гостьовий стан, тож дзеркалимо
   ТОЙ САМИЙ візуальний рецепт (main.css: .pdc-btn--like.pdc-btn--guest,
   .chka-btn--guest — пунктир --dash + фон --surface-2 + текст --muted,
   САМЕ --muted, не --muted-3: контраст 6.28:1 проти 3.31:1, той самий
   QA-фолбек D2). Новий компаунд-клас, а не правка main.css — та сама
   причина, що в решти файлів каналу пропозицій. Формально виходить за
   заявлений на початку файлу перелік префіксів .psel-, .sgt-, .ppf-
   (це не селектор парку і не кнопка файлу), але належить рівно тому самому
   спільному вузлу «вхід у канал пропозицій для обох поверхонь», а не
   окремій формі — тому тут, а не в poi-suggestions.css/
   attribute-suggestions.css/photo-suggestions.css. */
.pdc-btn--secondary.pdc-suggest--guest {
    background: var(--surface-2);
    color: var(--muted);
    border: 1px dashed var(--dash);
}
.pdc-btn--secondary.pdc-suggest--guest:hover {
    background: var(--bg-2);
    color: var(--ink-2);
}
.pdc-btn--secondary.pdc-suggest--guest svg { fill: none; }