/* Экран входа в «Молодёжь»: index.html (вход), register.html (заявка),
pending.html (ждём подтверждения), auth-action.html (ссылки из писем
Firebase). У всех четырёх один каркас — тёмная половина с фотографией
слева, светлая с формой справа; на телефоне фото сверху, форма шторкой
снизу. Внутренние страницы приложения этот файл не подключают, у них
свой app.css. */
:root{
/* ==== Палитра раздела — та же, что в app.css ==== */
--ink:#1f2420;
--ink-2:#3d443c;
--paper:#fbfaf7;
--veil:rgba(255,255,255,.3);
--card:#f1f0ea;
--card-alt:#f6f5f0;
--sand:#e9e7e2;
--line:rgba(31,36,32,.10);
--line-2:rgba(31,36,32,.16);
--line-3:rgba(31,36,32,.22);
--muted:#6b7269;
--muted-2:#8b9189;
--muted-3:#a5a99f;
--accent:#2f6b4f;
--accent-hover:#245840;
--accent-line:rgba(47,107,79,.35);
/* На тёмном скате — светлые sage-нейтрали */
--dark:#22302a;
--dark-line:rgba(238,241,236,.14);
--dark-line-2:rgba(238,241,236,.22);
--dark-fg:#eef1ec;
--dark-fg-2:#c6d0c8;
--dark-muted:#96a098;
--dark-muted-2:#7a857c;
--dark-soft:#8fb39f;
--brand-door:#6fb894; /* «свет» в арке знака, как в app.css */
/* ==== Типографика: apple-дисциплина ==== */
--f-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
--f-sans:'Golos Text',system-ui,sans-serif;
--f-mono:'IBM Plex Mono',"SF Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Касания — как в app.css: без задержки на двойной тап, без выделения
текста на кнопках. .is-pressed ставит /js/press.js, пока палец на
элементе; !important — перебить transition компонентов, чтобы нажатый
цвет появлялся сразу, а уходил с обычной длительностью. :hover — только
в @media (hover:hover), иначе на телефоне подсветка залипает. */
button,a,[role="button"],summary,[data-press]{touch-action:manipulation}
button,[role="button"]{-webkit-user-select:none;user-select:none}
.is-pressed{transition-duration:0s !important}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.stage{min-height:100vh;display:grid;grid-template-columns:1.15fr 1fr}
/* ============ Left: тёмная глава (apple-binary rhythm) ============ */
.chapter{
background:var(--dark);color:var(--dark-fg);
padding:36px 48px 40px;display:flex;flex-direction:column;position:relative;
isolation:isolate;overflow:hidden;
}
/* Фон главы: активный файл выбирается атрибутом data-bg на .chapter (1|2|3).
.jfif — это JPEG, браузеры читают нормально. */
.chapter::before{
content:"";position:absolute;inset:0;z-index:-2;
background:var(--dark) center/cover no-repeat;
/* Затемнение, чтобы текст держал контраст поверх любой фотографии */
filter:brightness(.55) saturate(.9);
}
/* Вуаль сверху идёт первым слоем, поверх фотографии: на светлых снимках
(bg1 — окно с солнцем) шапка иначе теряется. В ::after её не сделать —
там режим screen, тёмное в нём не проявляется. */
.chapter[data-bg]::before{--scrim:linear-gradient(180deg,rgba(10,16,13,.5),rgba(10,16,13,0) 34%)}
.chapter[data-bg="1"]::before{background-image:var(--scrim),url("/youth/img/chapter-bg1.webp")}
.chapter[data-bg="2"]::before{background-image:var(--scrim),url("/youth/img/chapter-bg2.webp")}
.chapter[data-bg="3"]::before{background-image:var(--scrim),url("/youth/img/chapter-bg3.webp")}
/* На телефоне глава занимает только верх экрана — там достаточно узкой
копии снимка, она вдвое легче. Это самый крупный элемент первого экрана
(по нему считается LCP), поэтому каждый килобайт виден на скорости. */
@media (max-width:900px){
.chapter[data-bg="1"]::before{background-image:var(--scrim),url("/youth/img/chapter-bg1-sm.webp")}
.chapter[data-bg="2"]::before{background-image:var(--scrim),url("/youth/img/chapter-bg2-sm.webp")}
.chapter[data-bg="3"]::before{background-image:var(--scrim),url("/youth/img/chapter-bg3-sm.webp")}
}
/* Верхний слой: мягкое световое пятно «свет из окна» слева-сверху
+ тонкая шумовая фактура — работает и с фото, и без него */
.chapter::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(60% 55% at 18% 12%, rgba(238,241,236,.16), rgba(238,241,236,0) 62%),
radial-gradient(80% 60% at 90% 100%, rgba(0,0,0,.35), rgba(0,0,0,0) 60%),
url("data:image/svg+xml;utf8,");
mix-blend-mode:screen;
}
.brand{display:flex;align-items:center;gap:14px}
/* Знак молодёжи (/img/emblem.svg#youth) прямо на тёмной фотографии:
светлые линии, светящаяся арка, крест — прорезь цвета раздела. */
.brand-mark{
width:50px;height:34px;flex:none;color:var(--dark-fg);
--logo-door:var(--brand-door);--logo-cross:var(--dark);
stroke:currentColor;stroke-width:1.5;
}
.brand-line{display:flex;flex-direction:column;gap:3px}
.brand-line .n{font:600 13px/1 var(--f-sans)}
.brand-line .s{font:400 12px/1 var(--f-mono);color:var(--dark-muted);letter-spacing:.02em}
.chapter-hero{flex:1;display:flex;flex-direction:column;justify-content:center;margin:56px 0 36px;max-width:520px}
/* Надзаголовок светлее, чем в макете (--dark-muted): на фотографии со
светлым пятном — окно на bg1 — серый по светлому не читался. */
.eyebrow{
display:inline-flex;align-items:center;gap:10px;margin-bottom:24px;
font:500 11px/1 var(--f-mono);color:var(--dark-fg-2);
letter-spacing:.18em;text-transform:uppercase;
}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--dark-line-2)}
.display{
margin:0;color:var(--dark-fg);
font:600 clamp(48px,5.6vw,72px)/1.05 var(--f-display);
letter-spacing:-.028em;
}
.lead{
margin:22px 0 0;max-width:440px;color:var(--dark-fg-2);
font:400 17px/1.55 var(--f-sans);
}
.chapter-foot{display:flex;gap:12px;align-items:stretch}
.event-card{
flex:1;background:rgba(20,28,24,.55);border:1px solid var(--dark-line-2);
-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);
border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:6px;
}
.event-card .when{
font:500 11px/1 var(--f-mono);color:var(--dark-muted);
letter-spacing:.1em;text-transform:uppercase;
}
.event-card .title{font:600 17px/1.3 var(--f-sans);color:var(--dark-fg);margin-top:4px}
.event-card .place{font:400 13px/1.4 var(--f-sans);color:var(--dark-muted)}
.rsvp{
display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;
border-top:1px solid var(--dark-line);
}
.avatars{display:flex}
.avatars .a{
width:24px;height:24px;border-radius:50%;background:#3a4640;color:var(--dark-fg-2);
border:1.5px solid var(--dark);margin-left:-6px;
font:600 9.5px/21px var(--f-mono);text-align:center;letter-spacing:.02em;
}
.avatars .a:first-child{margin-left:0}
.avatars .a.more{background:transparent;border:1.5px dashed var(--dark-line-2);color:var(--dark-muted)}
.rsvp .count{font:400 12.5px/1 var(--f-sans);color:var(--dark-muted)}
.rsvp .count b{color:var(--dark-fg);font-weight:600}
.stat-card{
width:172px;background:rgba(20,28,24,.55);border:1px solid var(--dark-line-2);
-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);
border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;justify-content:space-between;gap:8px;
}
.stat-card .k{font:500 11px/1 var(--f-mono);color:var(--dark-muted);letter-spacing:.12em;text-transform:uppercase}
.stat-card .v{font:600 36px/1 var(--f-display);letter-spacing:-.03em;color:var(--dark-fg)}
.stat-card .sub{font:400 12.5px/1.4 var(--f-sans);color:var(--dark-muted)}
/* ============ Right: светлая retail-панель ============ */
.form-panel{
background:var(--paper);display:flex;flex-direction:column;
padding:36px 48px;
}
.form-top{
display:flex;justify-content:flex-end;align-items:center;gap:6px;
font:400 13px/1 var(--f-sans);color:var(--muted);
}
.form-top a{color:var(--accent);font-weight:500;transition:color .18s cubic-bezier(.28,0,.22,1);outline:none}
@media (hover:hover){.form-top a:hover{color:var(--accent-hover)}}
.form-top a.is-pressed{color:var(--accent-hover)}
.form-top a:focus{outline:2px solid var(--accent);outline-offset:2px}
.form-inner{margin:auto 0;max-width:380px;width:100%;align-self:center;padding:20px 0}
.form-h1{
margin:0 0 8px;color:var(--ink);
font:600 34px/1.1 var(--f-display);letter-spacing:-.024em;
}
.form-sub{margin:0 0 30px;font:400 15px/1.5 var(--f-sans);color:var(--muted)}
.tabs{
display:flex;background:var(--card);border-radius:10px;padding:3px;gap:3px;margin-bottom:22px;
}
.tabs button,.tabs a{
flex:1;height:38px;border:none;background:none;
display:flex;align-items:center;justify-content:center;
font:500 13.5px/1 var(--f-sans);color:var(--muted);cursor:pointer;
border-radius:8px;text-decoration:none;transition:color .18s cubic-bezier(.28,0,.22,1),background .18s cubic-bezier(.28,0,.22,1);outline:none
}
@media (hover:hover){.tabs button:hover,.tabs a:hover{color:var(--ink)}}
.tabs button.is-pressed,.tabs a.is-pressed{color:var(--ink)}
.tabs button:focus,.tabs a:focus{outline:2px solid var(--accent);outline-offset:-2px}
.tabs .active{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(31,36,32,.08)}
.g-btn{
width:100%;height:48px;border-radius:10px;background:var(--paper);color:var(--ink);
border:1px solid var(--line-3);
display:flex;align-items:center;justify-content:center;gap:10px;
font:500 14.5px/1 var(--f-sans);cursor:pointer;
transition:background .18s cubic-bezier(.28,0,.22,1),border-color .18s cubic-bezier(.28,0,.22,1);outline:none
}
@media (hover:hover){.g-btn:hover{background:var(--card-alt);border-color:var(--ink-2)}}
.g-btn.is-pressed{background:var(--card-alt);border-color:var(--ink-2)}
.g-btn:focus{outline:2px solid var(--accent);outline-offset:2px}
.g-btn svg{width:17px;height:17px;flex:none}
.divider{display:flex;align-items:center;gap:12px;margin:18px 0}
.divider .line{flex:1;height:1px;background:var(--line)}
.divider .lbl{
font:500 10.5px/1 var(--f-mono);color:var(--muted-2);
letter-spacing:.16em;text-transform:uppercase;
}
.field{
width:100%;height:48px;background:var(--paper);color:var(--ink);
border:1px solid var(--line-2);border-radius:10px;padding:0 16px;
font:400 15px/1 var(--f-sans);outline:none;margin-bottom:10px;
transition:border-color .18s cubic-bezier(.28,0,.22,1),box-shadow .18s cubic-bezier(.28,0,.22,1);
}
.field::placeholder{color:var(--muted-3)}
.field:focus{
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(47,107,79,.18);
}
.field-pw{position:relative;margin-bottom:10px}
.field-pw .field{margin-bottom:0;padding-right:44px}
.field-pw .eye{
position:absolute;right:10px;top:50%;transform:translateY(-50%);
background:none;border:none;color:var(--muted);cursor:pointer;padding:6px;
display:flex;border-radius:6px;transition:color .18s cubic-bezier(.28,0,.22,1),background .18s cubic-bezier(.28,0,.22,1);outline:none
}
@media (hover:hover){.field-pw .eye:hover{color:var(--ink);background:var(--card)}}
.field-pw .eye.is-pressed{color:var(--ink);background:var(--card)}
.field-pw .eye:focus{outline:2px solid var(--accent);outline-offset:2px}
.submit{
width:100%;height:48px;border-radius:10px;background:var(--accent);color:#fff;
border:none;font:600 14.5px/1 var(--f-sans);cursor:pointer;margin-top:14px;
display:flex;align-items:center;justify-content:center;
transition:background .18s cubic-bezier(.28,0,.22,1);outline:none
}
@media (hover:hover){.submit:hover{background:var(--accent-hover)}}
.submit.is-pressed{background:var(--accent-hover)}
.submit:focus{outline:2px solid #fff;outline-offset:2px}
.helper{
margin-top:22px;padding:14px 16px;background:var(--card);
border-radius:10px;display:flex;gap:12px;align-items:flex-start;
}
.helper svg{flex:none;color:var(--muted);margin-top:2px}
.helper .txt{font:400 13px/1.5 var(--f-sans);color:var(--ink-2)}
.helper .txt b{color:var(--ink);font-weight:600;display:block;margin-bottom:2px}
/* Вход тех, кто входил через Google, — только в мини-приложении
телеграма, на месте кнопки Google (auth-page.js). Та же карточка, что у
подсказок. Главная кнопка — в профиль на сайте; поле для кода — мелкой
запасной строкой. */
.tg-code{padding:14px 16px 16px;background:var(--card);border-radius:10px;display:flex;flex-direction:column}
.tg-code .lead{margin:0 0 12px;font:400 13px/1.5 var(--f-sans);color:var(--ink-2)}
.tg-code .lead b{color:var(--ink);font-weight:600;display:block;margin-bottom:2px}
.tg-code .submit{margin-top:0}
.tg-code .alt{margin:14px 0 8px;font:400 12.5px/1.4 var(--f-sans);color:var(--muted)}
.tg-code .code-row{display:flex;gap:8px}
.tg-code .code-row .field{flex:1;min-width:0;margin-bottom:0;font-family:var(--f-mono);letter-spacing:.14em}
.tg-code .code-row .g-btn{width:auto;flex:none;padding:0 20px}
.form-foot{
margin-top:22px;text-align:center;
font:400 13px/1.4 var(--f-sans);color:var(--muted-2);
}
.form-foot a{color:var(--muted);border-bottom:1px solid var(--line-2);padding-bottom:1px;transition:color .18s cubic-bezier(.28,0,.22,1),border-color .18s cubic-bezier(.28,0,.22,1);outline:none}
@media (hover:hover){.form-foot a:hover{color:var(--ink);border-color:var(--line-3)}}
.form-foot a.is-pressed{color:var(--ink);border-color:var(--line-3)}
.form-foot a:focus{outline:2px solid var(--accent);outline-offset:2px}
/* ============ Mobile — native-app feel ============
Паттерн: фото-hero сверху ~48vh, форма выезжает снизу
как bottom-sheet с закруглёнными углами, safe-area учтён. */
@media (max-width:900px){
html,body{background:var(--dark);overscroll-behavior-y:none}
.stage{
grid-template-columns:1fr;grid-template-rows:auto 1fr;
min-height:100vh;min-height:100dvh;
}
/* --- Hero-сцена: фото на весь верх экрана --- */
.chapter{
padding:calc(env(safe-area-inset-top) + 22px) 22px 44px;
min-height:48vh;min-height:48dvh;
}
/* Усилить нижний фейд под bottom-sheet — чтобы карточка мягко «выходила» из фото */
.chapter::after{
background:
radial-gradient(70% 45% at 20% 15%, rgba(238,241,236,.14), rgba(238,241,236,0) 65%),
linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%),
url("data:image/svg+xml;utf8,");
mix-blend-mode:normal;
}
.brand{gap:11px}
.brand-mark{width:47px;height:32px}
.brand-line .n{font-size:12.5px}
.brand-line .s{font-size:11px}
.chapter-hero{margin:auto 0 0;padding-top:36px;max-width:none}
.eyebrow{margin-bottom:18px;font-size:10.5px;letter-spacing:.16em}
.display{font-size:clamp(36px,9vw,48px);letter-spacing:-.024em}
.lead{font-size:15.5px;line-height:1.5;margin-top:14px;max-width:none}
/* Событие/stat на мобиле убираем — читатель уже на входе, лишний шум */
.chapter-foot{display:none}
/* --- Bottom-sheet: форма выезжает поверх фото --- */
.form-panel{
background:var(--paper);
border-radius:22px 22px 0 0;
margin-top:-24px;position:relative;z-index:1;
padding:14px 22px calc(env(safe-area-inset-bottom) + 26px);
box-shadow:0 -6px 24px rgba(0,0,0,.18);
}
/* Grabber (визуальный хэндл шторки) */
.form-panel::before{
content:"";display:block;width:38px;height:4px;border-radius:2px;
background:var(--line-3);margin:0 auto 10px;
}
/* Плашка «Первый раз?» — над шторкой, поверх фотографии. Отсчёт от
низа .form-panel (bottom:100%), а не от верха экрана: иначе она
села бы внутрь шторки, на её собственный верхний край. */
.form-top{
position:absolute;top:auto;bottom:100%;right:22px;margin-bottom:14px;
background:rgba(34,48,42,.55);
-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
padding:7px 12px;border-radius:980px;
color:var(--dark-fg-2);font-size:12.5px;
}
.form-top a{color:var(--dark-fg);font-weight:600}
@media (hover:hover){.form-top a:hover{color:var(--dark-fg)}}
.form-top a.is-pressed{color:var(--dark-fg)}
.form-inner{max-width:none;padding:6px 0 4px}
.form-h1{font-size:26px;margin-bottom:6px;letter-spacing:-.02em}
.form-sub{font-size:14px;margin-bottom:22px}
.tabs{margin-bottom:18px}
.tabs button,.tabs a{height:36px;font-size:13px}
.g-btn{height:50px;font-size:15px;border-radius:12px}
.field{height:50px;font-size:16px;border-radius:12px} /* 16px = iOS не зумит инпут */
.submit{height:50px;font-size:15px;border-radius:12px}
.divider{margin:16px 0}
.helper{margin-top:18px}
.form-foot{margin-top:16px}
}
/* --- Компакт для маленьких экранов (iPhone SE ~ 375×667) --- */
@media (max-width:900px) and (max-height:720px){
.chapter{min-height:38vh;min-height:38dvh;padding-bottom:32px}
.lead{display:none}
.form-h1{font-size:22px}
.form-sub{margin-bottom:16px}
.helper{display:none}
}
/* ============ Motion — apple ease, без баунса ============ */
@media (prefers-reduced-motion:no-preference){
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.brand,.chapter-hero,.chapter-foot,.form-inner>*{animation:fadeUp .5s cubic-bezier(.28,0,.22,1) both}
.chapter-hero{animation-delay:.06s}
.chapter-foot{animation-delay:.14s}
.form-inner .tabs{animation-delay:.05s}
.form-inner .g-btn{animation-delay:.09s}
.form-inner .divider{animation-delay:.13s}
.form-inner form{animation-delay:.17s}
.form-inner .helper{animation-delay:.22s}
.form-inner .form-foot{animation-delay:.26s}
}
/* ========== A11Y: DISABLED STATES ========== */
button:disabled,input:disabled,select:disabled,textarea:disabled{
opacity:.5;cursor:not-allowed !important;
}
button:disabled{background-color:var(--line-2) !important;color:var(--muted) !important}
/* ========== A11Y: FORM VALIDATION ==========
:user-invalid, а не :invalid — иначе пустая обязательная почта краснеет
ещё до того, как человек к ней прикоснулся, и форма встречает красной. */
input:user-invalid,textarea:user-invalid,select:user-invalid{
border-color:#d32f2f !important;
box-shadow:0 0 0 3px rgba(211,47,47,.1) !important;
}
input:user-invalid:focus,textarea:user-invalid:focus,select:user-invalid:focus{
border-color:#d32f2f !important;
box-shadow:0 0 0 3px rgba(211,47,47,.2) !important;
}
.error-message{font:400 12px/1.35 var(--f-sans);color:#d32f2f;margin-top:4px;display:none}
.error-message.show{display:block}
.field.error .error-message{display:block}
/* ========== A11Y: LOADING/SKELETON STATES ========== */
.skeleton{background:linear-gradient(90deg,var(--card) 0%,var(--sand) 50%,var(--card) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite}
@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton.text{height:16px;border-radius:4px;margin-bottom:8px}
.skeleton.button{height:40px;border-radius:10px}
.skeleton.card{height:200px;border-radius:12px}
.loading{position:relative;pointer-events:none}
.loading::after{content:"";position:absolute;inset:0;background:var(--veil);border-radius:inherit;z-index:10}
/* ========== A11Y: EMPTY STATES ========== */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;color:var(--muted);min-height:200px}
.empty-state svg{width:64px;height:64px;opacity:.4;margin-bottom:16px}
.empty-state b{display:block;font:600 16px/1.3 var(--f-sans);color:var(--ink);margin-bottom:8px}
.empty-state p{font:400 13px/1.5 var(--f-sans);color:var(--muted);max-width:320px}
/* ========== A11Y: TOUCH TARGETS ========== */
@media (max-width:900px){
button,a[role="button"],[role="button"]{min-width:44px;min-height:44px}
input[type="checkbox"],input[type="radio"]{min-width:44px;min-height:44px}
}
/* ========== A11Y: MOTION PREFERENCE ========== */
@media (prefers-reduced-motion:reduce){
*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
/* ── Дописано при переносе макета на сайт ───────────────────────
Всё выше — вёрстка макета как есть; ниже только то, чего в макете
не было: сообщения об ошибке/письме, состояние «идёт запрос» у
кнопок и карточки левой панели до того, как приехали данные. */
/* Сообщения формы */
.form-msg{margin:12px 0 0;font:400 13px/1.45 var(--f-sans);min-height:1px}
.form-msg.err{color:#b3705f}
.form-msg.ok{color:var(--accent)}
.form-msg:empty{margin:0}
@media (prefers-reduced-motion:no-preference){
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.form-msg.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}
}
/* Кнопка в работе: не подменяем текст (иначе у кнопки Google пропал бы
значок), а гасим её и крутим точку справа. */
.g-btn.is-busy,.submit.is-busy{pointer-events:none;opacity:.62}
.g-btn.is-busy::after,.submit.is-busy::after{
content:"";width:14px;height:14px;margin-left:10px;border-radius:50%;
border:2px solid currentColor;border-top-color:transparent;
animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
/* Ссылка «Восстановить» — кнопкой, но выглядит как ссылка макета */
.linkish{background:none;border:none;padding:0;font:inherit;cursor:pointer;color:var(--muted);border-bottom:1px solid var(--line-2);transition:color .18s cubic-bezier(.28,0,.22,1),border-color .18s cubic-bezier(.28,0,.22,1);outline:none}
@media (hover:hover){.linkish:hover{color:var(--ink);border-color:var(--line-3)}}
.linkish.is-pressed{color:var(--ink);border-color:var(--line-3)}
.linkish:focus{outline:2px solid var(--accent);outline-offset:2px}
/* Карточки левой панели ждут ответа /api/youth/welcome. Пока данных нет
(или их нечего показать — пустой календарь, никого в команде) — карточки
просто не занимают места, вместо «0 идут» и пустой строки.
[hidden] сам по себе тут не работает: у .rsvp и карточек свой display,
он сильнее браузерного правила для атрибута. */
[hidden]{display:none !important}
/* У церковного события места нет — пустая строка не должна занимать место. */
.event-card .place:empty{display:none}
/* ── Надёжность пароля (register.html, auth-action.html) ────────
Три проверки: длина, буквы+цифры, регистр/символ. Первые две
обязательны, третья — бонус; шкала под полем показывает, сколько
набрано, подсказки подсвечиваются по мере выполнения. */
.pw-meter{margin:-2px 0 10px}
.pw-bar{height:4px;border-radius:2px;background:var(--sand);overflow:hidden}
.pw-fill{height:100%;width:0;border-radius:2px;background:#b3705f;transition:width .35s cubic-bezier(.28,0,.22,1),background-color .3s ease}
.pw-fill[data-level="1"]{width:33%;background:#b3705f}
.pw-fill[data-level="2"]{width:66%;background:#c2913f}
.pw-fill[data-level="3"]{width:100%;background:var(--accent)}
.pw-hints{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px;font:400 12px/1 var(--f-sans);color:var(--muted-2)}
.pw-hints .pw-hint{display:flex;align-items:center;gap:5px;transition:color .2s ease}
.pw-hints .pw-hint.met{color:var(--accent)}
.pw-hints .pw-hint svg{width:13px;height:13px;flex:none;stroke-dasharray:10;stroke-dashoffset:10;transition:stroke-dashoffset .25s ease .05s}
.pw-hints .pw-hint.met svg{stroke-dashoffset:0}
/* ── Страницы состояния: pending.html и auth-action.html ────────
Тот же каркас, что и у формы, только вместо полей — кружок со
значком, заголовок и пара фактов. */
.state-icon{
width:72px;height:72px;border-radius:50%;color:var(--accent);
background:rgba(47,107,79,.10);position:relative;
display:flex;align-items:center;justify-content:center;margin-bottom:24px;
}
.state-icon svg{position:relative;z-index:1}
.state-icon.waiting::before,.state-icon.waiting::after{
content:"";position:absolute;inset:0;border-radius:50%;
border:1.5px solid rgba(47,107,79,.4);
}
@media (prefers-reduced-motion:no-preference){
.state-icon.waiting::before,.state-icon.waiting::after{animation:statePulse 2.6s cubic-bezier(.2,.6,.4,1) infinite}
.state-icon.waiting::after{animation-delay:1.3s}
.state-icon.done svg path{stroke-dasharray:26;stroke-dashoffset:26;animation:stateCheck .5s cubic-bezier(.65,0,.35,1) .1s forwards}
}
@keyframes statePulse{0%{transform:scale(1);opacity:.85}70%{transform:scale(1.32);opacity:0}100%{opacity:0}}
@keyframes stateCheck{to{stroke-dashoffset:0}}
.state-icon.done{background:rgba(47,107,79,.16)}
.state-icon.error{background:rgba(179,112,95,.12);color:#b3705f}
.facts{margin-top:24px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.facts .fact{
display:flex;justify-content:space-between;align-items:baseline;gap:16px;
padding:13px 16px;border-bottom:1px solid var(--line);
font:400 13.5px/1.35 var(--f-sans);
}
.facts .fact:last-child{border-bottom:none}
.facts .fact .k{color:var(--muted);flex:none}
.facts .fact .v{color:var(--ink);font-weight:500;text-align:right;overflow-wrap:anywhere}
.facts .fact .v.mono{font-family:var(--f-mono);font-weight:400;font-size:12.5px}
.facts .fact .v.waiting{color:#a8813f}
.facts .fact .v.ok{color:var(--accent)}
.state-actions{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.state-actions .g-btn{justify-content:center}
/* Появление панели при загрузке (fadeUp выше) держится на анимации с
fill:both. Для узлов, которые прячутся и показываются при переключении
вкладки, это ловушка: браузер перезапускает анимацию каждый раз, когда
элемент возвращается из display:none, и до её первого кадра он
прозрачный. Поэтому, как только вступительная анимация отыграла, снимаем
её со всей панели — дальше показ/скрытие мгновенные. */
.form-inner.settled>*{animation:none !important}
/* Переключение «вход ↔ заявка» — мгновенное, без анимации и перезагрузки:
вкладки, кнопка Google, разделитель и фотография остаются на месте, а
меняются только узлы с data-for. Проявление тут пробовали и убрали:
любая анимация на этих узлах означает, что долю секунды панель пустая,
то есть ровно тот «заметный» переход, которого мы избегаем. */
/* ── Тёмная тема ──────────────────────────────────────────────
Левая половина с фотографией и так тёмная — меняется только правая,
светлая: бумага, поля, подсказки. Атрибут ставит скрипт в . */
:root[data-theme="dark"]{
--ink:#eef1ec;
--ink-2:#c6d0c8;
--paper:#171d1a;
--card:#232b26;
--card-alt:#2a332d;
--sand:#2a332d;
--line:rgba(238,241,236,.10);
--line-2:rgba(238,241,236,.16);
--line-3:rgba(238,241,236,.24);
--muted:#96a098;
--muted-2:#7a857c;
--muted-3:#5f6a63;
--accent:#6fb894;
--accent-hover:#8ccfab;
--veil:rgba(0,0,0,.32);
color-scheme:dark;
}
:root[data-theme="dark"] .field{background:#1f2723}
:root[data-theme="dark"] .g-btn{background:#1f2723}
@media (hover:hover){:root[data-theme="dark"] .g-btn:hover{background:#2a332d}}
:root[data-theme="dark"] .g-btn.is-pressed{background:#2a332d}
:root[data-theme="dark"] .submit{color:#12211a}
:root[data-theme="dark"] .tabs .active{background:#1f2723}
:root[data-theme="dark"] .field:focus{box-shadow:0 0 0 3px rgba(111,184,148,.22)}
:root[data-theme="dark"] .state-icon{background:rgba(111,184,148,.14)}
:root[data-theme="dark"] .facts .fact .v.ok{color:var(--accent)}
/* На телефоне форма-шторка лежит на фотографии — граница должна читаться */
@media (max-width:900px){
:root[data-theme="dark"] .form-panel{box-shadow:0 -6px 24px rgba(0,0,0,.5)}
}
:root[data-theme="dark"] input:user-invalid,
:root[data-theme="dark"] textarea:user-invalid,
:root[data-theme="dark"] select:user-invalid{border-color:#e08a76 !important}
:root[data-theme="dark"] input:user-invalid:focus,
:root[data-theme="dark"] textarea:user-invalid:focus,
:root[data-theme="dark"] select:user-invalid:focus{border-color:#e08a76 !important;box-shadow:0 0 0 3px rgba(224,138,118,.2) !important}
:root[data-theme="dark"] .error-message{color:#e08a76}
/* Переход между страницами — такой же, как внутри раздела (app.css):
старое быстро гаснет, новое проявляется с лёгким подъёмом. Без него вход
в приложение оставался бы жёсткой перезагрузкой. */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
::view-transition-old(root){animation:150ms cubic-bezier(.23,1,.32,1) both vtOut}
::view-transition-new(root){animation:300ms cubic-bezier(.23,1,.32,1) both vtIn}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(6px)}}