/* ═══════════════════════════════════════════════════════════════════════
   Окна объекта поверх карты: карточка просмотра и форма создания.

   Створка у них общая — .map-sheet: одинаковый размер, скругление,
   появление и кнопка закрытия. Человек должен узнавать окно с первого
   взгляда, а не гадать, то же это место или другое. Дальше классы
   расходятся: .object-card про готовые строки, .object-form про поля.

   Отдельный файл, а не кусок map.css: карта отвечает за то, как выглядит
   местность, а эти окна — за то, как выглядит объект. Живут они только
   на карте, поэтому и подключаются только там.

   Стекло у створки самое плотное из трёх: под ней снимок со всей его
   пестротой, а текста в карточке много, и на лёгком стекле он тонет.
   Плотность выбирают по количеству текста — это общее правило, здесь
   оно просто доведено до края.

   Размытие тут настоящее, в отличие от метки: карточка — обычный
   элемент страницы, а не рисунок в canvas.
   ═══════════════════════════════════════════════════════════════════════ */

.map-sheet {
    position: fixed;
    z-index: 20;
    /* Почти во весь экран, но под шапкой: закрыть карточку и уйти
       по своим делам человек должен, не нащупывая её край. */
    top: calc(var(--chrome-top) + var(--header-height) + 12px);
    right: 12px;
    bottom: 12px;
    left: 12px;
    /* На большом мониторе карточка во всю ширину была бы строкой
       в полторы сотни знаков — читать такое тяжело. */
    max-width: 1080px;
    margin: 0 auto;
    border-radius: 22px;
    /* Скругление должно обрезать содержимое, иначе снимки и полоса
       прокрутки вылезают за углы. */
    overflow: hidden;

    /* Закрытая карточка убрана через visibility, а не display: none
       и не hidden — по той же причине, что и меню разделов: display
       переключается мгновенно, и плавного появления с ним не бывает,
       а visibility и анимацию оставляет, и убирает карточку из обхода
       табом и из чтения голосом. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(14px) scale(.995);
    transition:
        opacity 260ms var(--ease),
        transform 260ms var(--ease),
        visibility 0s linear 260ms;
}

/* Кольцо фокуса самой карточке не нужно: табом на неё не попасть,
   внимание ей отдают из скрипта при открытии. Кнопкам и ссылкам внутри
   кольцо остаётся — его снимает только это правило и только с карточки. */
.map-sheet:focus {
    outline: none;
}

.map-sheet.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}

/* Прокручивается содержимое, а не сама карточка: так её края, скругление
   и кнопка закрытия остаются на месте, сколько бы ни было текста. */
.map-sheet__body {
    overflow-y: auto;
    /* Своя полоса прокрутки не нужна: у карточки она рисуется системной
       светлой таблеткой поверх стекла и читается как чужое пятно. Прокрутка
       от этого не пропадает — остаются колесо, палец и клавиши. Тот же
       приём, что у списка в поле формы (style.css). */
    scrollbar-width: none;
    height: 100%;
    padding: 28px;
    /* Справа сверху кнопка — оставляем ей место, чтобы заголовок
       не заезжал под неё. */
    padding-right: 76px;
    -webkit-overflow-scrolling: touch;
}

.map-sheet__body::-webkit-scrollbar {
    display: none;
}

/* Крестик. Стекла на нём намеренно нет: стекло не вкладывают в стекло —
   размывать ему было бы нечего, кроме самой карточки. Поэтому простая
   полупрозрачная заливка. */
.map-sheet__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .06);
    color: var(--ink);
    cursor: pointer;
    transition: background-color 160ms var(--ease);
}

.map-sheet__close:hover {
    background-color: rgba(0, 0, 0, .12);
}


/* ── Снимки ─────────────────────────────────────────────────────────────
   До пяти штук, в строку с прокруткой вбок. Сеткой они бы прыгали:
   у объекта бывает один снимок, бывает пять, и сетка под пять с одним
   снимком выглядит поломанной. */
.object-card__gallery {
    position: relative;
    margin: 0 0 22px;
}

/* Полосы прокрутки под снимками нет намеренно: листают их стрелками
   и пальцем, а полоса — лишняя серая черта поперёк карточки. Стрелки
   появляются ровно тогда, когда листать есть что, так что подсказка
   о прокрутке не теряется. */
.object-card__photos {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.object-card__photos::-webkit-scrollbar {
    display: none;
}

.object-card__photo {
    flex: 0 0 auto;
    width: min(420px, 74%);
    height: 260px;
    border-radius: 14px;
    object-fit: cover;
    background-color: rgba(0, 0, 0, .05);
    scroll-snap-align: start;
}

/* Стрелки поверх снимков, по краям. Из лёгкого стекла — единственное
   место на сайте, где стекло лежит на стекле, и это оправдано: под
   стрелкой не соседняя панель, а сам снимок, и размывается именно он.
   Заливку, кромку и тень даёт класс .glass в разметке. */
.object-card__arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-top: -19px;
    padding: 0;
    border-radius: 50%;
    color: var(--ink);
    cursor: pointer;
    transition: background-color 160ms var(--ease);
}

.object-card__arrow:hover {
    background-color: var(--material-strong);
}

.object-card__arrow--back {
    left: 10px;
    /* Значок один на обе кнопки, назад — тот же, только развёрнутый. */
    transform: scaleX(-1);
}

.object-card__arrow--forward {
    right: 10px;
}

/* Когда снимков нет. Не пустое место, а прямая надпись: пустое место
   читается как «не загрузилось», а надпись — как «их правда нет». */
.object-card__empty-photos {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    margin: 0 0 22px;
    border-radius: 14px;
    background-color: rgba(0, 0, 0, .04);
    color: var(--ink-muted);
    font-size: 14px;
}


/* ── Что написано ───────────────────────────────────────────────────── */

.object-card__title {
    margin: 0 0 12px;
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 600;
    letter-spacing: -.024em;
    line-height: 1.15;
}

/* Состояние — плашка с кружком того же цвета, что кружок в метке
   на карте. По нему человек связывает карточку с тем, на что нажал. */
.object-card__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 20px;
    padding: 5px 12px 5px 10px;
    border-radius: var(--pill);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.01em;
}

.object-card__status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: currentColor;
}

.object-card__status--lost {
    background-color: rgba(227, 0, 0, .1);
    color: var(--status-lost-ink);
}

/* Кружок ярче надписи: надпись должна читаться, кружок — узнаваться
   по цвету, и это разные требования. */
.object-card__status--lost .object-card__status-dot {
    background-color: var(--status-lost);
}

.object-card__status--restoration {
    background-color: rgba(245, 184, 0, .18);
    color: var(--status-restoration-ink);
}

.object-card__status--restoration .object-card__status-dot {
    background-color: var(--status-restoration);
}

/* Адрес и координаты. Подпись сверху мелким, значение под ней — так
   пара читается одним взглядом и не рассыпается на узком экране.

   Черта под ними, а не над: она отделяет короткие сведения об объекте
   от длинного рассказа о нём. */
.object-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
    margin: 0 0 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.object-card__fact dt {
    margin-bottom: 2px;
    color: var(--ink-muted);
    font-size: 12px;
    letter-spacing: -.005em;
}

.object-card__fact dd {
    margin: 0;
    font-size: 15px;
}

/* Координаты — цифрами одной ширины: иначе при переходе от метки к метке
   строка дёргается, хотя длина у неё одна и та же. */
.object-card__coords {
    display: flex;
    align-items: center;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}

/* «Показать на карте» — метка в сером кружке слева от чисел. Кружок
   того же серого, что и подсветка строки в меню: это ход, а не плашка
   со сведениями, и выделяться сильнее координат ему незачем. */
.object-card__spot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .06);
    color: var(--ink);
    cursor: pointer;
    transition: background-color 150ms var(--ease);
}

.object-card__spot:hover {
    background-color: rgba(0, 0, 0, .12);
}

.object-card__description {
    max-width: 68ch;
    margin: 0;
    font-size: 16px;
    white-space: pre-line;
}


@media (max-width: 600px) {
    .map-sheet {
        top: calc(var(--chrome-top) + var(--header-height) + 8px);
        right: 8px;
        bottom: 8px;
        left: 8px;
        border-radius: 18px;
    }

    .map-sheet__body {
        padding: 20px;
        padding-right: 60px;
    }

    .object-card__photo {
        width: 86%;
        height: 200px;
    }
}


/* ── Меню по правому щелчку ─────────────────────────────────────────────
   Одна кнопка, но устроена как меню: их станет больше — «что здесь?»,
   «скопировать координаты». Прячется и показывается так же, как меню
   разделов в шапке, и по той же причине: visibility оставляет плавность
   и убирает кнопку из обхода табом. */
.map-menu {
    position: fixed;
    z-index: 21;
    padding: 5px;
    border-radius: 12px;

    visibility: hidden;
    opacity: 0;
    transform: scale(.96);
    transform-origin: top left;
    transition:
        opacity 140ms var(--ease),
        transform 140ms var(--ease),
        visibility 0s linear 140ms;
}

.map-menu.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}

.map-menu__item {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    letter-spacing: -.01em;
    white-space: nowrap;
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms var(--ease);
}

.map-menu__item:hover {
    background-color: rgba(0, 0, 0, .05);
}


/* ── Форма нового объекта ───────────────────────────────────────────── */

.object-form__title {
    margin: 0 0 6px;
    font-size: clamp(24px, 3.2vw, 32px);
    font-weight: 600;
    letter-spacing: -.024em;
}

.object-form__form {
    margin-top: 20px;
}

/* Широта и долгота — в строку: это одна величина, записанная двумя
   числами, и разносить их по разным строкам значит делать вид, что
   они не связаны. На узком экране всё равно встают друг под друга. */
.object-form__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 520px) {
    .object-form__pair {
        grid-template-columns: 1fr;
    }
}

.object-form__statuses {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.object-form__legend {
    padding: 0;
    margin-bottom: 8px;
    color: var(--ink-muted);
    font-size: 12px;
}

/* Выбор состояния — те же плашки, что потом окажутся в карточке.
   Человек выбирает не слово из списка, а ровно то, что увидит на карте. */
.status-choice {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 8px 8px 0;
    padding: 7px 14px 7px 12px;
    border: 1px solid transparent;
    border-radius: var(--pill);
    background-color: rgba(0, 0, 0, .04);
    color: var(--ink-muted);
    font-size: 14px;
    cursor: pointer;
    transition:
        background-color 160ms var(--ease),
        border-color 160ms var(--ease),
        color 160ms var(--ease);
}

/* Само поле не прячем, а обесцвечиваем: спрятанное выпадает из дерева
   доступности, и программа чтения с экрана его не находит. Тот же приём,
   что у галочки «Запомнить меня». */
.status-choice__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.status-choice__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: currentColor;
}

.status-choice--lost:has(.status-choice__input:checked) {
    background-color: rgba(227, 0, 0, .1);
    border-color: rgba(227, 0, 0, .3);
    color: var(--status-lost-ink);
}

.status-choice--lost .status-choice__dot {
    background-color: var(--status-lost);
}

.status-choice--restoration:has(.status-choice__input:checked) {
    background-color: rgba(245, 184, 0, .18);
    border-color: rgba(245, 184, 0, .45);
    color: var(--status-restoration-ink);
}

.status-choice--restoration .status-choice__dot {
    background-color: var(--status-restoration);
}

/* Кольцо фокуса рисуем вокруг всей плашки: само поле обесцвечено,
   и кольцо на нём никто бы не увидел. */
.status-choice:has(.status-choice__input:focus-visible) {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* Описание — то же поле ввода, только в несколько строк. Подпись
   уезжает вверх по тому же правилу, поэтому разметка та же.

   Значка у него нет: значок стоит по центру одной строки, а у поля
   в пять строк никакого центра нет. Поэтому отступ слева обычный,
   а не под значок, и подпись стоит там же. */
.text-field--area .text-field__input {
    height: auto;
    min-height: 120px;
    padding: 26px 16px 12px;
    line-height: 1.5;
    resize: vertical;
}

.text-field--area .text-field__label {
    left: 17px;
}

.object-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}


/* Аватарка того, кто добавил объект, рядом с его именем. Круглая при
   любой картинке: загруженные квадратные, а запасная — рисунок. */
.object-card__author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.object-card__author-photo {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}


/* ── Корзина ────────────────────────────────────────────────────────────
   Рядом с крестиком и точно такая же на вид: тот же размер, та же
   подложка. Отличие одно — красный значок, и этого достаточно: две
   одинаковые кнопки в углу человек различает по значку, а не по форме.

   Красный тот же, что у состояния «утрачено»: другого красного на сайте
   нет и заводить незачем. */
/* Карандаш и корзина стоят столбиком под крестиком: крестик на 16,
   высота у всех 36, зазор 8. */
.object-card__edit {
    position: absolute;
    top: 60px;
    right: 16px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .06);
    color: var(--ink);
    cursor: pointer;
    transition: background-color 160ms var(--ease);
}

.object-card__edit:hover {
    background-color: rgba(0, 0, 0, .12);
}

.object-card__delete {
    position: absolute;
    top: 104px;
    right: 16px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 9px;
    border: 0;
    border-radius: 18px;
    background-color: rgba(0, 0, 0, .06);
    color: var(--status-lost);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color 160ms var(--ease),
        color 160ms var(--ease);
}

.object-card__delete:hover {
    background-color: rgba(0, 0, 0, .12);
}

/* Пока не спросили, кнопка круглая и в ней один значок. Слово появляется
   только после первого щелчка — тогда же она и краснеет целиком, чтобы
   второй щелчок нельзя было сделать не заметив. */
.object-card__delete-word {
    display: none;
}

.object-card__delete.is-asking {
    background-color: var(--status-lost);
    color: #fff;
}

.object-card__delete.is-asking .object-card__delete-word {
    display: inline;
}


/* ── Снимки в форме правки ──────────────────────────────────────────────
   Те, что у объекта уже есть. Маленькие: их тут не разглядывают,
   а решают, какой оставить. */
.object-form__photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.object-form__photo {
    position: relative;
    width: 96px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    transition: opacity 160ms var(--ease);
}

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

/* Помеченный к удалению не исчезает, а бледнеет и перечёркивается:
   так видно, что именно уйдёт, и передумать можно до сохранения. */
.object-form__photo.is-removed {
    opacity: .35;
}

.object-form__photo.is-removed::after {
    content: "";
    position: absolute;
    inset: 50% 6px auto;
    height: 2px;
    background-color: var(--status-lost);
}

.object-form__photo-drop {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
    cursor: pointer;
}

.object-form__photo-drop:hover {
    background-color: rgba(0, 0, 0, .72);
}


/* ── Окно «Показать на карте» ────────────────────────────────────────────
   Створка та же, что у карточки, поэтому размер, скругление и появление
   достаются ей даром. Своего тут только внутреннее устройство: заголовок,
   карта во всю оставшуюся высоту и строчка пояснения под ней.

   Лежит выше карточки: открывают его из карточки, и карточка должна
   остаться под ним — закрыл окно, вернулся к тому же объекту. */
.spot {
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
}

.spot__title {
    /* Справа сверху крестик — оставляем ему место, чтобы длинное название
       не заезжало под него. */
    margin: 0;
    padding-right: 56px;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.02em;
}

/* Карта занимает всё, что осталось: смотреть на место в щёлочку незачем. */
.spot__map {
    flex: 1 1 auto;
    width: 100%;
    min-height: 240px;
    border: 0;
    border-radius: 16px;
    background-color: rgba(0, 0, 0, .06);
}

.spot__legend {
    margin: 0;
    color: var(--ink-muted);
    font-size: 13px;
}