/* ==========================================================================
   Рабочая версия: то, чего нет в макете.
   Файл намеренно отделён от site.css (который генерируется сборкой из макета),
   иначе пересборка затрёт правки.

   Здесь три вещи:
     1) аннотации макета скрыты от людей и от поисковика;
     2) страница города L2 в двух режимах;
     3) формы: состояния, маска телефона, ошибки.
   ========================================================================== */

/* --- 1. Аннотации макета -------------------------------------------------
   Решение владельца: скрыть полностью. Разметка остаётся в репозитории как
   документация, но не попадает ни в выдачу, ни в accessibility tree. */
.anno{display:none !important}

/* --- 2. Каркас страницы города ------------------------------------------ */
.l2{background:var(--bg);color:var(--ink);min-height:100vh}
.l2__hero{background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%);
          padding:34px 0 46px;border-bottom:1px solid var(--line)}
.l2__crumb{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-mute);margin-bottom:22px}
.l2__crumb a{color:var(--accent);text-decoration:none;font-weight:600}
.l2__crumb a:hover{text-decoration:underline}
.l2__hero h1{font-size:clamp(28px,3.8vw,44px);font-weight:800;margin-bottom:14px;max-width:16ch}
.l2__lead{font-size:18px;color:var(--ink-soft);max-width:60ch}

.l2__status{display:flex;gap:14px;align-items:flex-start;background:var(--surface);
            border:1.5px solid var(--line);border-radius:var(--r-m);padding:16px 18px;
            margin-top:26px;max-width:640px}
.l2__status b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:16.5px;margin-bottom:4px}
.l2__status span{font-size:14.5px;color:var(--ink-soft);line-height:1.55}
.l2__dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;margin-top:5px}
.l2__status--live .l2__dot{background:var(--eco)}
.l2__status--live{border-color:var(--eco-line)}
.l2__status--wait .l2__dot{background:var(--peach);border:2px solid #E0A96A}
.l2__status--wait{background:var(--peach)}

.l2__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:44px;align-items:start}
.l2__h2{font-size:clamp(21px,2.2vw,27px);font-weight:800;margin-bottom:16px}
.l2__h2:not(:first-child){margin-top:38px}

.l2__price{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(30px,3.4vw,42px);
           font-weight:800;color:var(--accent);letter-spacing:-.02em;line-height:1.1;
           font-variant-numeric:tabular-nums;margin-bottom:12px}
.l2__note{font-size:14.5px;color:var(--ink-mute);line-height:1.6;margin-top:12px}
.l2__list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:4px}
.l2__list li{position:relative;padding-left:28px;font-size:15.5px;color:var(--ink-soft);line-height:1.5}
.l2__list li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;
  border-left:2.2px solid var(--eco);border-bottom:2.2px solid var(--eco);
  transform:rotate(-45deg)}

.l2__aside{position:sticky;top:92px}
.l2__form{background:var(--surface);border:1px solid var(--line);
          border-radius:var(--r-l);padding:26px;box-shadow:var(--el-2)}
.l2__wait{margin-top:14px;font-size:13.5px;color:var(--ink-mute);text-align:center}
.l2__cities{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:10px}
.l2__cities .cc{background:var(--surface);border:1.5px solid var(--line);color:var(--ink);
                padding:15px 17px;border-radius:var(--r-m);text-decoration:none;
                display:flex;flex-direction:column;gap:5px;
                transition:transform var(--t-fast) var(--ease-press),
                           border-color var(--t-fast) var(--ease-out),
                           box-shadow var(--t-fast) var(--ease-out)}
.l2__cities .cc:hover{border-color:var(--accent-line);box-shadow:var(--el-2)}
.l2__cities .cc:active{transform:scale(.98)}
.l2__cities .cc b{font-family:'Plus Jakarta Sans',sans-serif;font-size:16.5px}
.l2__cities .cc em{font-style:normal;font-size:12.5px;color:var(--ink-mute)}
.l2__cities .cc__dot{width:8px;height:8px;border-radius:50%;background:var(--eco);margin:3px 0}
.l2__cities .cc__n{align-self:flex-start;font-size:12px;font-weight:700;color:#8A5A16;
                   background:#FBEFDD;border:1px solid #E8D2AC;border-radius:999px;
                   padding:3px 10px;margin-top:4px}
.l2__back{margin-top:34px}
.l2__back .btn{width:100%;max-width:280px;text-align:center}

/* --- 3. Формы ------------------------------------------------------------ */
.fld{display:block;margin-bottom:13px}
.fld span{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px}
.fld input{width:100%;border:1.5px solid var(--line);background:#fff;border-radius:var(--r-ctl);
           padding:13px 16px;font-size:15.5px;color:var(--ink);font-family:inherit;
           transition:border-color var(--t-fast) var(--ease-out),
                      box-shadow var(--t-fast) var(--ease-out)}
.fld input::placeholder{color:#9AA0A8}
.fld input:focus{outline:none;border-color:var(--accent);
                 box-shadow:0 0 0 3px var(--accent-tint)}
.l2__submit{width:100%;margin-top:4px}

/* Форма ожидания на главной лежит на синем фоне — ей нужны свои цвета,
   а не светлая тема, которая работает в L2. */
.wait__f input{border:1.5px solid rgba(255,255,255,.34);background:rgba(20,22,26,.18);color:#fff}
.wait__f input::placeholder{color:rgba(255,255,255,.88)}
.wait__f input:focus{outline:none;border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.22)}

.lead-status{font-size:14px;line-height:1.5;margin-top:12px;min-height:1.2em}
.lead-status--error{color:var(--danger)}
.lead-status--ok{color:var(--eco)}
.lead-status--loading{color:var(--ink-mute)}
.wait .lead-status{color:#FFE9C2}

.btn:disabled{opacity:.62;cursor:progress;transform:none}

/* #7C8494, а не #6E7683: на фоне футера #14161A первый даёт 3.95:1 и не
   проходит AA для 15px. Здесь 4.82:1. */
.ftr__pending{color:#7C8494;font-size:14.5px;cursor:help;text-decoration:underline dotted}

/* --- 4. Страница услуги в городе (L3) ----------------------------------
   Каркас, статус, форма и сетки переиспользуют L2 (.l2__*),
   здесь только то, чего на L2 нет: прайс-таблица с разбивкой.
   FAQ берёт стили .faq из site.css — та же разметка <details>. */
.l3__ptable{width:100%;max-width:520px;border-collapse:collapse;margin-top:8px;
            font-variant-numeric:tabular-nums}
.l3__ptable th{font-size:13px;font-weight:600;color:var(--ink-mute);text-align:left;
               padding:10px 14px;border-bottom:1.5px solid var(--line)}
.l3__ptable td{padding:12px 14px;border-bottom:1px solid var(--line);font-size:15.5px;
               color:var(--ink-soft)}
.l3__ptable td:not(:first-child){font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;
               color:var(--ink)}
.l3__ptable tbody tr:last-child td{border-bottom:none}

/* --- Адаптив ------------------------------------------------------------- */
@media(max-width:920px){
  .l2__grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .l2__aside{position:static}
  .l2__hero{padding:26px 0 34px}
}
@media(max-width:520px){
  .l2__form{padding:20px}
  .l2__cities{grid-template-columns:minmax(0,1fr)}
  .l2__back .btn{max-width:100%}
}