/* Общий вид страниц форума: «Вопрос из зала» и «Оценка сценария».
   Образец цветов и компонентов — сайт форума sber.ru/autoforum: тёмный фон, ключевой кадр с машиной, белый текст,
   белое поле и белая кнопка. Раскладка — как в приложениях (подборка Mobbin): содержимое лежит прямо на фоне,
   без карточек и рамок; выбор — залитые плитки; после отправки — экран с галочкой. */
@font-face{font-family:"SB Sans Display";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/SBSansDisplay-Regular.woff2") format("woff2")}
@font-face{font-family:"SB Sans Display";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/SBSansDisplay-SemiBold.woff2") format("woff2")}

:root{
  --bg:#02252f;                                            /* фон сайта форума */
  --muted:rgba(255,255,255,.72);
  --fill:rgba(255,255,255,.1);                             /* плитки и строки, которые ещё не выбраны */
  --ink:#060606;                                           /* текст на белой кнопке и в поле */
  --green:#21a038;                                         /* зелёный Сбера: только галочка «готово» */
  --side:max(16px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  font-family:"SB Sans Display",system-ui,sans-serif;
  font-synthesis:none;
  color:#fff;
  background:var(--bg);
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;                                /* случайное «потянуть, чтобы обновить» стёрло бы набранный вопрос */
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0;min-height:100svh;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));-webkit-font-smoothing:antialiased;
  font-size:16px;line-height:1.4;
  background:radial-gradient(80% 36% at 50% 100%,rgba(0,190,160,.18),transparent 72%) no-repeat,var(--bg);
}
p{margin:0}

/* шапка: логотип «Сбер 185», название форума и кадр с машиной; кадр сверху и снизу растворяется в фоне.
   Строку «Для тех, кто рулит» заказчик убрал 16.10.2026 — «чтобы воздуха дать» */
.hero{position:relative;overflow:hidden;padding:calc(16px + env(safe-area-inset-top,0px)) var(--side) 0;text-align:center}
.logo{display:block;width:88px}
.logo img{display:block;width:100%;height:auto}
.forum{position:relative;z-index:1;margin-top:18px;font-size:clamp(21px,6.4vw,26px);line-height:1.15;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.car{
  display:block;width:calc(100% + 2*var(--side));max-width:none;height:auto;aspect-ratio:16/9;margin:-8% calc(-1*var(--side)) 0;
  -webkit-mask-image:linear-gradient(transparent 3%,#000 36%,#000 76%,transparent);mask-image:linear-gradient(transparent 3%,#000 36%,#000 76%,transparent);
}

/* дело страницы — прямо на фоне, начинается на растворённом нижнем краю кадра */
.content{position:relative;z-index:1;max-width:560px;margin:-20px auto 0;padding:0 var(--side)}
h1{margin:0 0 8px;font-size:21px;line-height:27px;font-weight:600;letter-spacing:-.01em}   /* не крупнее названия форума в шапке (заказчик, 16.10.2026) */
h2{margin:0;font-size:18px;line-height:24px;font-weight:600}
.lead{margin-bottom:20px;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* поле — белое, как в форме регистрации на сайте форума */
textarea{
  display:block;width:100%;min-height:148px;padding:16px;border:1px solid transparent;border-radius:12px;outline:0;resize:none;
  background:#fff;color:var(--ink);font:inherit;font-size:16px;line-height:22px;   /* не меньше 16 px: иначе iPhone приближает страницу при вводе */
}
textarea::placeholder{color:rgba(6,6,6,.45)}
textarea:focus-visible{outline:0;border-color:#262626;box-shadow:0 0 0 1px #262626}   /* как на сайте форума: в фокусе рамка темнеет */
.count{margin-top:8px;text-align:right;font-size:13px;line-height:16px;color:var(--muted)}

.btn{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:16px;padding:0 24px;
  border:0;border-radius:12px;background:#fff;color:var(--ink);
  font:inherit;font-size:16px;line-height:20px;font-weight:600;text-decoration:none;cursor:pointer;
  transition:transform .12s ease-out,background-color .12s ease-out,opacity .12s ease-out;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.btn:active{transform:scale(.98);background:#dfe5e6}
.btn:disabled{opacity:.4;cursor:default;transform:none}
.btn.quiet{background:var(--fill);color:#fff}                                    /* второе действие: залитая, без рамки */
.btn.quiet:active{background:rgba(255,255,255,.16)}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
.msg{margin-top:12px;font-size:14px;line-height:20px;color:#ffb4a8}
.msg:empty{margin-top:0}

/* оценка: пять плиток — это обычные радиокнопки; выбранная становится белой, как кнопка */
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:20px}
.scale input{position:absolute;opacity:0;pointer-events:none}
.scale label{
  display:grid;place-items:center;height:60px;border-radius:12px;background:var(--fill);
  font-size:22px;line-height:1;font-weight:600;cursor:pointer;
  transition:transform .12s ease-out,background-color .12s ease-out,color .12s ease-out;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
}
.scale label:active{transform:scale(.95)}
.scale input:checked+label{background:#fff;color:var(--ink)}
.scale input:focus-visible+label{outline:2px solid #fff;outline-offset:3px}
.ask{margin-top:8px;font-size:18px;line-height:24px}
.ends{display:flex;justify-content:space-between;gap:16px;margin-top:10px;font-size:13px;line-height:16px;color:var(--muted)}
.ends span:last-child{text-align:right}

/* список: сценарии, когда в адресе не указан номер, и две страницы на главной — строки через тонкую линию */
.list{margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.14)}
.list li{border-bottom:1px solid rgba(255,255,255,.14)}
.list a,.list span{
  display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:12px 0;
  color:#fff;text-decoration:none;font-weight:600;line-height:20px;
}
.list a{transition:opacity .12s ease-out;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.list a:active{opacity:.6}
.list small{flex:none;font-size:14px;line-height:20px;font-weight:400;color:var(--muted)}
.list a small::after{content:"›";margin-left:8px;font-size:20px;line-height:1;vertical-align:-1px}

/* готово: галочка, заголовок и пояснение по центру */
.done{text-align:center;padding-top:8px}
.done::before{
  content:"";display:block;width:64px;height:64px;margin:0 auto 20px;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/32px no-repeat;
}
.done .lead{margin-bottom:0}
.done .list{margin-top:24px;text-align:left}
.done .btn{margin-top:28px}

/* шире телефона: кадр не растягивается, а стоит по центру и по краям растворяется в фоне; его свет продолжает мягкое пятно */
@media (min-width:600px){
  .hero{background:radial-gradient(70% 11% at 50% 74%,rgba(0,214,150,.3),transparent 80%),radial-gradient(520px 62% at 50% 60%,rgba(0,170,135,.32),transparent 74%)}
  .car{
    --fade:radial-gradient(50% 50% at 50% 52%,#000 60%,rgba(0,0,0,.72) 71%,rgba(0,0,0,.34) 82%,rgba(0,0,0,.1) 92%,transparent);   /* овал целиком внутри кадра: прямых краёв не видно */
    width:min(780px,100%,80vh);margin:-40px auto 0;-webkit-mask-image:var(--fade);mask-image:var(--fade);   /* на невысоком экране кадр меньше: форма видна без прокрутки */
  }
  .content{margin-top:-40px}
}
@media (min-width:900px){
  .hero{padding:28px 40px 0}
  .logo{width:108px}
  .forum{margin-top:4px;font-size:44px}
  .car{margin-top:-56px}
  .content{margin-top:-56px}
  h1{font-size:34px;line-height:42px}
  h2{font-size:20px;line-height:26px}
}

@media (hover:hover) and (pointer:fine){
  .btn:not(:disabled):not(.quiet):hover{background:rgba(6,6,6,.6);color:#fff}      /* как кнопки на сайте форума */
  .btn.quiet:hover,.scale input:not(:checked)+label:hover{background:rgba(255,255,255,.16)}
  .list a:hover{opacity:.75}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}