/* r11 B «Тиснение» (выбор Ильи 23.10: «Тиснение топ») — блок для переноса в основной вход. Витрина: form-r11/index.html.
   КАК ПОДКЛЮЧИТЬ: в site/app/ строкой ПОСЛЕ app-login.css:
     <link rel="stylesheet" href="form-r11/B-integrate.css">
   либо вставить этот файл в конец app-login.css (после блока «r10f: левая половина»). Разметку app-login.js менять не нужно —
   классы совпадают (.fld > .box > input + .peek, .fe, .or, .b-google, .b-main, .lnk, .row-forgot, .foot).

   ЧТО ЗАМЕНЯЕТ в app-login.css (эти правила после переноса можно удалить, блок их перекрывает):
     стр. 48–58   .fld input {…} / :hover / :focus / .fld.bad input / autofill     → поле стало прозрачным, материал на .box
     стр. 59–62   .peek {…}                                                        → то же + своя лунка фокуса
     стр. 63      .fe { color: var(--err) }                                        → #DDF2FF, без красного
     стр. 70–75   .lnk / .row-forgot                                               → тач-зона псевдоэлементом, фокус-лунка
     стр. 81      @supports corner-shape { .b }                                    → + псевдоэлементам (двойной край, Илья B2)
     стр. 89–94   .b-google {…}                                                    → графитовая пластина
     стр. 111–112 .or::before/::after                                              → тиснёная перфорация
     стр. 120     .foot .lnk                                                       → тач-зона псевдоэлементом
     стр. 198     html[data-v="2"] .fld input, .b-google { background-image: --sl } → снято (см. ниже)
     стр. 200–203 html[data-v="2"] фокус/ошибка поля                                → фокус «Кромка» / «Тихое дно», ошибка-перфорация
     стр. 207     html[data-v="2"] .b-main { box-shadow }                          → тот же рим r10f, без изменений по виду
   «Войти» r10f (стр. 204–223) не трогается: ядро, hover, press, загрузка остаются как есть.

   ВАРИАНТ ФОКУСА: по умолчанию «Кромка». «Тихое дно» — класс fx-floor на .panel (или на <html>), Илья выбирает по B3-focus-variants.png.
   Подсветка от сцены (--sl из cards.js) на полях снята: в лунке она давала второй тон под текстом. Если нужна — вернуть на
   .box как background-image поверх градиента лунки, а не на input. */

/* ---------- лунка поля: один контур на элементе + глубина градиентом ---------- */
html[data-v="2"] .box { position: relative; isolation: isolate; height: 44px; border-radius: var(--r-fld, 12px);
  background: linear-gradient(180deg, #010102 0%, #060709 60%, #0D0F13 100%);
  box-shadow: inset 0 0 0 1px rgb(200 220 255 / 0.48), inset 0 4px 8px -2px rgb(0 0 0 / 1); }   /* 24.10: граница в покое ≥ 3:1 к фону (не-текстовый элемент, WCAG 1.4.11); было 0.07 ≈ 1.1:1 */
@supports (corner-shape: squircle) { html[data-v="2"] .box, html[data-v="2"] .box::after, html[data-v="2"] .b::before, html[data-v="2"] .b::after { corner-shape: squircle; } }
@media (hover: hover) and (pointer: fine) { html[data-v="2"] .box:hover { box-shadow: inset 0 0 0 1px rgb(200 220 255 / 0.72), inset 0 4px 8px -2px rgb(0 0 0 / 1); } }
html[data-v="2"] .fld input, html[data-v="2"] .fld input:hover, html[data-v="2"] .fld input:focus,
html[data-v="2"] .fld.bad input, html[data-v="2"] .fld.bad input:focus {
  position: relative; z-index: 3; background: transparent; background-image: none; box-shadow: none; border-radius: inherit; transition: none; }
html[data-v="2"] .fld input:-webkit-autofill, html[data-v="2"] .fld input:-webkit-autofill:focus { box-shadow: inset 0 0 0 100px #040507; -webkit-text-fill-color: #F3F6FA; }

/* ---------- фокус: свет заходит на кромку лунки, ярче в точке у каретки, гаснет вдоль края; появление 220 мс, гаснет 120 ---------- */
html[data-v="2"] .box::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 120ms cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: inset 0 0 0 1.5px rgb(242 250 255 / 0.95), inset 0 0 7px 1px rgb(92 169 255 / 0.55);
  -webkit-mask: radial-gradient(70% 160% at 8% 100%, #000 0%, rgb(0 0 0 / 0.55) 40%, rgb(0 0 0 / 0.12) 75%, transparent 100%);
          mask: radial-gradient(70% 160% at 8% 100%, #000 0%, rgb(0 0 0 / 0.55) 40%, rgb(0 0 0 / 0.12) 75%, transparent 100%); }
html[data-v="2"] .fx-floor .box::after, html[data-v="2"].fx-floor .box::after {
  box-shadow: inset 0 -1.5px 0 rgb(242 250 255 / 0.95), inset 0 -9px 9px -7px rgb(92 169 255 / 0.6);
  -webkit-mask: radial-gradient(55% 220% at 30% 100%, #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 100%);
          mask: radial-gradient(55% 220% at 30% 100%, #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 100%); }
html[data-v="2"] .box:focus-within::after { opacity: 1; transition-duration: 220ms; }

/* ---------- ошибка ≠ фокус рисунком кромки: перфорация #DDF2FF + значок + текст; в фокусе — внутреннее кольцо ---------- */
html[data-v="2"] .fld.bad .box { background: linear-gradient(180deg, #050608, #0C0E12); box-shadow: inset 0 4px 8px -2px rgb(0 0 0 / 1); }   /* контур ошибки один: пунктир ::after, без сплошной рамки под ним */
html[data-v="2"] .fld.bad .box::after { opacity: 1; box-shadow: none; border: 1.5px dashed rgb(221 242 255 / 0.9); -webkit-mask: none; mask: none; }
html[data-v="2"] .fld.bad .box:focus-within::after { box-shadow: inset 0 0 0 2.5px rgb(92 169 255 / 0.4); }
html[data-v="2"] .fe { color: #DDF2FF; font-weight: 500; }
html[data-v="2"] .fe .ic { color: #DDF2FF; }

/* ---------- отключено: лунка мелеет, текст 52 % ---------- */
html[data-v="2"] .box:has(input:disabled) { box-shadow: inset 0 0 0 1px rgb(200 220 255 / 0.05); background: #07080A; cursor: not-allowed; }
html[data-v="2"] .box:has(input:disabled) input, html[data-v="2"] .box:has(input:disabled) .peek { color: rgb(220 230 245 / 0.52); -webkit-text-fill-color: rgb(220 230 245 / 0.52); cursor: not-allowed; }

/* ---------- «Показать»: без анимации цвета; фокус — маленькая лунка внутри поля ---------- */
html[data-v="2"] .peek { z-index: 4; transition: none; background: none; }
@media (hover: hover) and (pointer: fine) { html[data-v="2"] .peek:hover { background: none; color: #fff; } }
html[data-v="2"] .peek:focus-visible { outline: none; color: #fff; }
html[data-v="2"] .peek::before { content: ''; position: absolute; z-index: -1; inset: 7px 6px; border-radius: 8px; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, #020203, #0B0D11); box-shadow: inset 0 2px 3px rgb(0 0 0 / 1), inset 0 0 0 1.5px rgb(143 203 255 / 0.8); }
html[data-v="2"] .peek:focus-visible::before { opacity: 1; }

/* ---------- Google: графитовая пластина, один контур, объём градиентом ---------- */
html[data-v="2"] .b-google { color: #E8ECF2; background: linear-gradient(180deg, #262A31 0%, #16191E 55%, #0E1013 100%); background-image: linear-gradient(180deg, #262A31 0%, #16191E 55%, #0E1013 100%);
  box-shadow: inset 0 0 0 1px rgb(200 220 255 / 0.08); transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
html[data-v="2"] .b-google::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.06), transparent 70%); transition: opacity 180ms ease; }
html[data-v="2"] .b-google > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) { html[data-v="2"] .b-google:hover { background: linear-gradient(180deg, #262A31 0%, #16191E 55%, #0E1013 100%); transform: translateY(-1px); }
  html[data-v="2"] .b-google:hover::before { opacity: 1; } }
html[data-v="2"] .b-google:active { transform: translateY(0) scale(0.97); }

/* ---------- фокус кнопок: радиус элемента, зазор 3 px, кольцо 2 px #8FCBFF 85 % (≈ 9:1 к #000), мягкий ореол ---------- */
html[data-v="2"] .b:focus-visible { outline: none; box-shadow: 0 0 0 3px #000, 0 0 0 5px rgb(143 203 255 / 0.85), 0 0 12px 5px rgb(24 119 242 / 0.35); }
html[data-v="2"] .b-main:focus-visible { box-shadow: inset 0 0 0 1px rgb(143 203 255 / 0.18), 0 0 0 3px #000, 0 0 0 5px rgb(143 203 255 / 0.85), 0 0 12px 5px rgb(24 119 242 / 0.35); }

/* ---------- разделитель «или»: тиснёная перфорация (штрих 2 / просвет 2, светлая + тёмная пара со сдвигом 0.5), гаснет к краям ---------- */
html[data-v="2"] .or { gap: 14px; }
html[data-v="2"] .or::before, html[data-v="2"] .or::after { height: 2px;
  background: linear-gradient(90deg, rgb(220 232 250 / 0.42) 0 2px, transparent 2px 4px) 0 0 / 4px 1px repeat-x,
              linear-gradient(90deg, rgb(0 0 0 / 0.9) 0 2px, transparent 2px 4px) 0.5px 1px / 4px 1px repeat-x; }
html[data-v="2"] .or::before { -webkit-mask: linear-gradient(90deg, transparent, #000 80%); mask: linear-gradient(90deg, transparent, #000 80%); }
html[data-v="2"] .or::after  { -webkit-mask: linear-gradient(90deg, #000 20%, transparent); mask: linear-gradient(90deg, #000 20%, transparent); }

/* ---------- ссылки: тач-зона 44 псевдоэлементом, фокус = подчёркивание + лунка, без бокса ---------- */
/* CD 23.10 п.7 (QA №7): цель 44 по самому элементу, не псевдо-зоной. Ссылка — inline-flex 44 px, текст по центру;
   отрицательные поля возвращают раскладку прежней (текст «Забыли пароль?» на той же строке, кнопка «Войти» не сдвинулась) */
html[data-v="2"] .row-forgot { margin: -12px 0 -8px; }
html[data-v="2"] .row-forgot .lnk, html[data-v="2"] .foot .lnk { position: relative; display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 6px; margin: 0 -6px; border-radius: 8px; }
html[data-v="2"] .foot { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.25em; margin-top: 12px; }
@media (max-width: 767px) { html[data-v="2"] .foot { margin-top: 4px; } }
html[data-v="2"] .lnk:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; color: #DDF2FF;
  background: rgb(200 220 255 / 0.07); box-shadow: 0 0 0 4px rgb(200 220 255 / 0.07), inset 0 1px 2px rgb(0 0 0 / 0.6); }

@media (prefers-reduced-motion: reduce) { html[data-v="2"] .box::after, html[data-v="2"] .b-google, html[data-v="2"] .b-google::before { transition-duration: 1ms !important; } }