/* Заявка на заведение (шаг 5, SPEC §9.1).
   ═══════════════════════════════════════
   Страница — родная сестра экрана входа и набрана его же мерками: та же
   бумага, тот же разворот «слово о деле слева, форма справа», тот же
   горизонт внизу, на котором стоит дятел, та же линейка у нижнего края.
   Значения отступов, кеглей и высот взяты из auth.css нарочно: две
   публичные страницы продукта должны читаться парой, а не двумя разными
   сайтами.

   Разница между ними — в работе. Во вход приходят каждый день и с ходу
   набирают почту; сюда приходят один раз, поэтому страница сначала
   называет, что человек заводит, и только потом просит пять полей.

   Свой файл, а не auth.css: на голом домене сервер отдаёт закрытый список
   файлов (server/app.ts, SITE_FILE), и стили входа в него не входят. */

.su{
  margin:0;
  background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:14px;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  /* Поле — утопленная бумага, а не серая коробка: в светлой теме белила
     поверх бумаги, в тёмной — просвет. Те же значения, что на входе. */
  --su-field:rgba(255,255,255,.48);
  --su-field-hi:rgba(255,255,255,.75);
}
html[data-ui-theme="dark"] .su{--su-field:rgba(255,255,255,.035);--su-field-hi:rgba(255,255,255,.065)}
.su *{box-sizing:border-box}
.su input,.su button{font:inherit}
.su button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.su a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
/* `display` сильнее атрибута `hidden`: без этого скрытое видно. */
.su [hidden]{display:none!important}
.su :focus-visible{outline:2px solid var(--ink-2);outline-offset:4px}

.su-shell{
  position:relative;isolation:isolate;
  min-height:100svh;display:flex;flex-direction:column;overflow:hidden;
}

/* ── шапка ── */
.su-header{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  padding:32px 5.6vw 0;
}
.su-brand{display:block;line-height:0}
.su-brand img{width:130px;height:auto;display:block}
/* Слово нарисовано чернилами по бумаге: на тёмной бумаге оно
   выворачивается — то же правило, что в колонке меню и на заставке.
   К дятлу filter не применяется никогда: он остаётся своим. */
html[data-ui-theme="dark"] .su-brand img{filter:brightness(0) invert(1);opacity:.94}
.su-enter{
  position:relative;
  font-size:12px;line-height:1.5;color:var(--ink-2);padding-top:4px;
  border-bottom:1px solid color-mix(in srgb,currentColor 28%,transparent);
  transition:color var(--t-tap) var(--ease),border-color var(--t-tap) var(--ease);
}
@media(hover:hover){.su-enter:hover{color:var(--ink);border-bottom-color:color-mix(in srgb,currentColor 45%,transparent)}}
/* На телефоне от ссылки остаётся одно слово — 36 на 23 пикселя, меньше
   пальца. Поле для нажатия шире самой надписи, а вид не меняется. */
.su-enter::after{content:"";position:absolute;inset:-12px -10px}

/* ── две половины одной страницы ──
   Заявка, вход и обращение без входа — одна страница на трёх адресах
   (`/`, `/login`, `/help`).
   Какую половину показать, решает строчка в <head> до первого кадра.
   Без скриптов — заявка: вход без них всё равно не работает. */
html:not([data-su-mode="login"]) [data-su-for="login"],
html:not([data-su-mode="help"]) [data-su-for="help"],
html:is([data-su-mode="login"],[data-su-mode="help"]) [data-su-for="signup"]{display:none!important}

/* ── разворот ── */
.su-main{
  position:relative;z-index:1;
  width:min(1080px,84.4%);margin:auto;
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(48px,7vw,116px);
  align-items:start;padding:36px 0 104px;
}

/* ── слово о деле ── */
.su-story{padding-top:28px}
.su-story h1{
  margin:0 0 23px;font-size:clamp(34px,3.7vw,54px);font-weight:500;
  line-height:1.1;letter-spacing:-.05em;text-wrap:balance;
}
/* Точка после заголовка — единственное цветное на странице, как на входе. */
.su-period{color:var(--now)}
.su-story>p{margin:0;font-size:14px;line-height:1.85;color:var(--ink-2);max-width:34ch}

/* ── заявка ── */
.su-panel{width:100%;max-width:380px;justify-self:end}
.su-panel-heading h2{margin:0 0 9px;font-size:28px;line-height:1.25;
  letter-spacing:-.035em;font-weight:500}
.su-panel-heading>p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2)}

.su-form{margin-top:27px;display:flex;flex-direction:column;gap:17px}
.su-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.su-line{min-width:0}
.su-line label{display:block;font-size:12px;line-height:1.5;font-weight:500}
.su-line input{
  width:100%;height:49px;margin-top:9px;padding:0 14px;
  border:1px solid var(--rule);border-radius:var(--r);
  background:var(--su-field);color:var(--ink);
  outline-offset:2px;
  transition:border-color var(--t-tap) var(--ease),background-color var(--t-move) var(--ease);
}
.su-line input::placeholder{color:var(--ink-3);opacity:1}
@media(hover:hover){.su-line input:hover{border-color:var(--ink-3)}}
.su-line input:focus{
  border-color:var(--ink-2);background:var(--su-field-hi);
  outline:2px solid color-mix(in srgb,var(--ink-2) 16%,transparent);
}
.su-line input[aria-invalid="true"]{border-color:var(--late)}
.su-err{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--late)}

/* Адрес и домен стоят в одной обойме: строку читают целиком, как её потом
   наберут в браузере. */
.su-address{
  display:flex;align-items:center;min-width:0;height:49px;margin-top:9px;padding-right:14px;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--su-field);
  transition:border-color var(--t-tap) var(--ease),background-color var(--t-move) var(--ease);
}
.su-address input{flex:1 1 auto;min-width:0;height:100%;margin-top:0;border:0;background:none;border-radius:0}
.su-address input:focus{outline:0;background:none}
.su-address:has(input:focus){
  border-color:var(--ink-2);background:var(--su-field-hi);
  outline:2px solid color-mix(in srgb,var(--ink-2) 16%,transparent);outline-offset:2px;
}
@media(hover:hover){.su-address:hover{border-color:var(--ink-3)}}
.su-address:has(input[aria-invalid="true"]){border-color:var(--late)}
.su-domain{flex:none;font-weight:400;color:var(--ink-3);white-space:nowrap;user-select:none}

/* ── подпись ── */
.su-go{
  width:100%;min-height:49px;margin-top:3px;
  display:flex;align-items:center;justify-content:center;gap:13px;
  border:1px solid var(--accent);border-radius:var(--r);
  background:var(--accent);color:var(--accent-ink);font-weight:500;
  transition:background-color var(--t-move) var(--ease),border-color var(--t-move) var(--ease),
    transform var(--t-tap) var(--ease);
}
.su-go svg{width:18px;height:18px;transition:transform var(--t-move) var(--ease)}
@media(hover:hover){.su-go:hover{background:var(--accent-2);border-color:var(--accent-2)}
  .su-go:hover svg{transform:translateX(3px)}}
.su-go:active{transform:scale(.985)}
.su-go[disabled]{opacity:.6;cursor:default;transform:none}
.su-go[disabled] svg{transform:none}

.su-terms{margin:0;font-size:11px;line-height:1.7;color:var(--ink-3)}
.su-inline{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
@media(hover:hover){.su-inline:hover{color:var(--ink);text-decoration-color:var(--ink-3)}}
.su-help-ask{margin-top:4px;text-align:center}

/* ── обращение без входа ──
   Повод — четыре плитки на выбор, а не выпадающий список: их видно сразу,
   и выбирают одним касанием. Текст — то же поле, что у заявки, только выше. */
.su-fieldset{border:0;margin:0;padding:0}
.su-fieldset legend{padding:0;font-size:12px;line-height:1.5;font-weight:500}
.su-optional{font-weight:400;color:var(--ink-3)}
.su-topics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.su-topic{position:relative;display:block}
.su-topic input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.su-topic span{
  display:flex;align-items:center;min-height:44px;padding:8px 12px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--su-field);font-size:12.5px;line-height:1.35;color:var(--ink-2);
  transition:border-color var(--t-tap) var(--ease),background-color var(--t-move) var(--ease),color var(--t-tap) var(--ease);
}
@media(hover:hover){.su-topic:hover span{border-color:var(--ink-3)}}
.su-topic input:checked + span{border-color:var(--ink-2);background:var(--su-field-hi);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-2)}
.su-topic input:focus-visible + span{outline:2px solid color-mix(in srgb,var(--ink-2) 16%,transparent);outline-offset:2px}
.su-fieldset[aria-invalid="true"] .su-topic span{border-color:var(--late)}
.su-line textarea{
  width:100%;min-height:104px;margin-top:9px;padding:12px 14px;resize:vertical;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--su-field);color:var(--ink);
  font:inherit;line-height:1.55;outline-offset:2px;
  transition:border-color var(--t-tap) var(--ease),background-color var(--t-move) var(--ease);
}
.su-line textarea::placeholder{color:var(--ink-3);opacity:1}
@media(hover:hover){.su-line textarea:hover{border-color:var(--ink-3)}}
.su-line textarea:focus{border-color:var(--ink-2);background:var(--su-field-hi);outline:2px solid color-mix(in srgb,var(--ink-2) 16%,transparent)}
.su-line textarea[aria-invalid="true"]{border-color:var(--late)}
.su-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.su-notice{margin:0;font-size:12px;line-height:1.7;color:var(--late)}

/* ── принято ──
   Ответ встаёт в ту же панель и её же мерками: заголовок заявки уходит,
   на его месте — что дальше будет с письмом. */
.su-panel[data-done] .su-panel-heading{display:none}
.su-done{display:grid;gap:13px;justify-items:start}
.su-stamp{
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ok) 45%,transparent);
}
.su-stamp svg{width:24px;height:24px}
/* Галка рисуется, когда ответ показали, а не когда страницу открыли: у
   скрытого блока движение проходит впустую. */
.su-stamp path{stroke-dasharray:14;stroke-dashoffset:14}
.su-done:not([hidden]) .su-stamp path{animation:su-tick var(--t-page) var(--ease) 60ms forwards}
@keyframes su-tick{to{stroke-dashoffset:0}}
.su-done h2{margin:0;font-size:28px;line-height:1.25;letter-spacing:-.035em;font-weight:500}
.su-done h2:focus-visible{outline:2px solid var(--ink-2);outline-offset:4px}
.su-done-said{margin:0;font-size:13px;line-height:1.75;color:var(--ink-2)}
.su-done-said b{color:var(--ink);font-weight:500}
.su-done .mono{font-family:var(--mono);font-size:.92em;color:var(--ink);white-space:nowrap}

/* ── горизонт ──
   Холм тот же, что на входе, но снят с другой стороны, и птица сидит под
   заявкой, а не под словом. Иначе это была бы та же картинка. */
.su-horizon{position:absolute;z-index:0;pointer-events:none;left:0;right:0;bottom:0;height:220px;color:var(--ink-2)}
.su-horizon>svg{width:100%;height:100%;display:block;overflow:visible}
.su-horizon-line{fill:none;stroke:var(--ink-2);stroke-width:1;opacity:.45}
.su-bird{position:absolute;left:30%;top:calc(48% + 4px);width:70px;transform:translate(-50%,-100%)}
.su-bird-fallback,.su-bird img{display:block;width:100%;height:auto}
.su-bird-fallback{opacity:1;transition:opacity var(--t-move) linear}
.su-bird-idle{position:absolute;inset:0;display:block;width:100%;height:auto;opacity:0;pointer-events:none;transition:opacity var(--t-move) linear}
/* Картинка уходит только тогда, когда клип действительно идёт, а не когда
   он просто готов: браузер может не дать ему пойти (телефон, экономия
   энергии, фоновая вкладка), и тогда на горизонте не оставалось никого —
   видео уже показано, но ни одного кадра в нём нет. */
.su-bird.is-playing .su-bird-idle{opacity:1}
.su-bird.is-playing .su-bird-fallback{opacity:0}

/* ── низ ── */
.su-footer{
  position:relative;z-index:1;
  padding:0 5.6vw 28px;font-size:10px;line-height:1.6;color:var(--ink-3);
}
.su-ruler{
  position:absolute;left:0;right:0;bottom:0;height:6px;
  background:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 40px);
  opacity:.7;
}

/* ── приход страницы ──
   Слово и заявка приезжают раз и коротко, как на входе. */
@starting-style{.su-story,.su-panel{opacity:0;transform:translateY(6px)}}
.su-story,.su-panel{transition:opacity var(--t-page) var(--ease),transform var(--t-page) var(--ease)}
@media(prefers-reduced-motion:reduce){
  .su-story,.su-panel,.su-go svg{transition:none}
  .su-done .su-stamp path{animation:none;stroke-dashoffset:0}
}

/* ── узкий экран ──
   Разворот складывается в одну колонку: сначала о чём речь, потом заявка.
   Горизонт остаётся — он и есть низ страницы. */
@media(max-width:900px){
  .su-main{grid-template-columns:1fr;gap:34px;width:min(520px,86%);padding:34px 0 150px}
  .su-story{padding-top:8px}
  .su-story h1{font-size:clamp(30px,7vw,40px);margin-bottom:16px}
  .su-panel{max-width:none;justify-self:stretch}
  .su-bird{left:72%;top:calc(64% + 4px)}
}

@media(max-width:600px){
  .su-header{padding:26px 6% 0}
  /* Два поля по полстроки не набрать большим пальцем. */
  .su-pair{grid-template-columns:1fr;gap:17px}
  .su-brand img{width:112px}
  /* Вопрос уходит, действие остаётся: «Войти» и «Завести своё» нужны на
     телефоне не меньше, чем на широком экране. */
  .su-enter-ask{display:none}
  /* Меньше 16 px — и Safari приближает страницу на фокусе. */
  .su-line input,.su-address input,.su-domain{font-size:16px}
  .su-line input,.su-address{height:50px}
  .su-footer{padding:0 6% 26px}
}

/* Один вход (§8.0): «Забыли пароль?» в строке подписи пароля, как на входе
   заведения; выбор заведения — строками с именем и адресом. */
.su-line-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.su-link{padding:0;border:0;background:none;font:inherit;font-size:12px;line-height:1.5;color:var(--ink-2);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
@media(hover:hover){.su-link:hover{color:var(--ink);text-decoration-color:var(--ink-3)}}
.su-back{align-self:center}
.su-line[hidden],.su-back[hidden],.su-venues[hidden]{display:none}
.su-venues{margin-top:27px}
.su-venues-say{margin:0 0 14px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.su-venue-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.su-venue{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r);background:var(--su-field);color:var(--ink);text-decoration:none;transition:border-color var(--t-tap) var(--ease)}
.su-venue b{font-size:14px;font-weight:500}
.su-venue span{font-size:12px;color:var(--ink-3)}
@media(hover:hover){.su-venue:hover{border-color:var(--ink-3)}}