/* ============================================================
   ГБС — лица на кадре. Слой рамок поверх фотографии.

   Цветом состояния не различаются (§7 дизайн-кода): различаются штрихом и
   текстом. Сплошная белая рамка — имя известно, пунктир — предположение или
   вопрос. Янтарь здесь запрещён (§2.2: он означает время), --alarm тоже —
   убрать рамку обратимо.
   ============================================================ */

.fo-layer {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;   /* по кадру продолжают работать зум и панорама */
    z-index: 2;
    transition: visibility var(--base) var(--ease), opacity var(--base) var(--ease);
}

/* В покое слой не просто прозрачный, а скрытый: opacity: 0 оставляет кнопки
   в обходе табом, и Tab уводил бы фокус на невидимые рамки. */
.lb.is-idle .fo-layer,
.gbs-faces-off .fo-layer {
    visibility: hidden;
    opacity: 0;
}

.fo-box {
    position: absolute;
    margin: 0;
    padding: 0;
    background: none;
    border: 2px solid var(--text-1);
    border-radius: var(--r-frame);
    color: var(--text-1);
    font: inherit;
    pointer-events: auto;
    cursor: default;
}

button.fo-box { cursor: pointer; }

/* Лицо на экране бывает и двенадцать пикселей: цель касания растягиваем
   псевдоэлементом, не трогая нарисованную рамку (§7 — не меньше 40 px). */
.fo-box::after {
    content: '';
    position: absolute;
    inset: -8px;
}

.fo-box.is-guess,
.fo-box.is-unknown {
    border-style: dashed;
}

.fo-box.is-unknown {
    border-color: var(--text-2);
    color: var(--text-2);
}

.fo-box:hover,
.fo-box:focus-visible {
    border-color: var(--text-1);
    color: var(--text-1);
}

.fo-name {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 3px;
    max-width: 240px;
    padding: 2px 6px;
    border-radius: var(--r-ui);
    background: rgba(0, 0, 0, .68);
    color: inherit;
    font-size: var(--t-micro);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* У нижнего края подпись некуда опустить — уводим её внутрь рамки. */
.fo-box.is-low .fo-name {
    top: auto;
    bottom: 100%;
    margin: 0 0 3px;
}

/* Школьная фотография: десяток подписей превращается в кашу, поэтому
   при большом числе лиц они появляются только по наведению и фокусу. */
.fo-layer.is-crowded .fo-name { opacity: 0; }
.fo-layer.is-crowded .fo-box:hover .fo-name,
.fo-layer.is-crowded .fo-box:focus-visible .fo-name { opacity: 1; }

/* ---------- подтвердить догадку модели ---------- */

/* Сидит на правом верхнем углу рамки, наполовину снаружи: внутри маленького
   лица она закрыла бы само лицо. Белая, как всё, чем взаимодействуют (§2.2):
   янтарь здесь означал бы время, а зелёного в палитре нет вовсе. */
.fo-ok {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%);
    border: 1px solid var(--text-1);
    border-radius: var(--r-ui);
    background: rgba(0, 0, 0, .72);
    color: var(--text-1);
    pointer-events: auto;
    cursor: pointer;
    transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.fo-ok svg { width: 14px; height: 14px; }

.fo-ok:hover,
.fo-ok:focus-visible {
    background: var(--text-1);
    color: var(--ground);
}

.fo-ok:disabled { cursor: default; opacity: .5; }

/* Цель касания добирается до 44 px, сама галочка не растёт (§7). */
.fo-ok::after {
    content: '';
    position: absolute;
    inset: -10px;
}

@media (max-width: 768px) {
    .fo-ok { width: 28px; height: 28px; }
    .fo-ok svg { width: 16px; height: 16px; }
}

/* ---------- режим рисования ---------- */

.fo-layer.is-marking {
    pointer-events: auto;
    cursor: crosshair;
    touch-action: none;     /* иначе браузер уводит жест в прокрутку */
}

.fo-layer.is-marking .fo-box {
    pointer-events: none;
    opacity: .45;
}

/* Пока рисуют рамку, подтверждать нечего — галочки не мешаются под курсором. */
.fo-layer.is-marking .fo-ok { display: none; }

.fo-draft {
    position: absolute;
    border: 2px dashed var(--text-1);
    background: rgba(237, 237, 234, .08);
    pointer-events: none;
}

/* ---------- окно выбора ---------- */

/* Окно выбора открывается ПОВЕРХ просмотра, а у .modal-scrim из base.css
   уровень --z-modal (700) — ниже, чем --z-lightbox (900). Без этой строки
   окно честно открывалось и честно оставалось за кадром. */
.fo-picker { z-index: calc(var(--z-lightbox) + 1); }

.fo-picker .modal-body { display: grid; gap: var(--s3); }
.fo-picker .fo-people { max-height: 46vh; overflow-y: auto; }
.fo-picker .fo-new { display: grid; gap: var(--s1); }
.fo-picker .fo-new.hidden { display: none; }

@media (max-width: 768px) {
    .fo-box::after { inset: -14px; }
    /* На телефоне хром не гаснет (§20), значит и рамки видны всегда. */
    .lb.is-idle .fo-layer { visibility: visible; opacity: 1; }
    .gbs-faces-off .fo-layer { visibility: hidden; opacity: 0; }
}