@import url("design-tokens.css");
/* Public profile: readable text and touch-sized controls on every viewport. */
:root { --fs-title:22px; --fs-section:17px; --fs-body:16px; --fs-meta:14px; --fs-micro:13px;
  --tap:44px; --fs-input:16px; --panel-px:24px; --panel-py:24px; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; background:radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 65%), var(--bg); background-attachment:fixed; color:var(--text); font:var(--fs-body)/var(--lh-reading) var(--font); -webkit-font-smoothing:antialiased; overflow-wrap:break-word; }
button, input, select, textarea { font:inherit; color:inherit; }
::selection { background:var(--accent-soft); color:var(--text); }
html { scrollbar-color:var(--muted) var(--bg); }
input, textarea { caret-color:var(--accent-text); }
a { color:var(--accent-text); text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:var(--r-tag); }
[hidden] { display:none !important; }
h1 { font-size:var(--fs-title); line-height:1.1; margin:0; font-weight:var(--weight-heading); letter-spacing:-.01em; }
h2 { font-size:var(--fs-section); line-height:1.1; margin:0; font-weight:var(--weight-heading); }
h1, h2, h3 { text-wrap:balance; }
p { margin:0; }
.muted { color:var(--muted); } .small { font-size:var(--fs-meta); }
code { font-family:var(--mono); font-size:.92em; }

/* Окно входа и подключения: одна карточка по центру (как экран входа админки) */
body.center { min-height:100vh; display:grid; place-items:center; padding:var(--space-5) var(--space-4); }
.card { width:min(420px, 100%); background:var(--glass-sheen), var(--glass-card); border:1px solid var(--glass-stroke); border-radius:var(--r); box-shadow:var(--glass-edge), var(--shadow); padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3); }
body.center > .card { border-radius:var(--r-lg); }
.card.center { text-align:center; align-items:center; } .card.center > * { max-width:100%; }
.brand-mark { width:44px; height:44px; border-radius:var(--r-inner); background:var(--accent); color:var(--accent-ink); display:grid; place-items:center;
  font-weight:var(--weight-display); font-size:var(--fs-metric-sm); flex:none; }   /* знак-логотип — как в меню админки */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:var(--tap); padding:0 var(--space-4); border:1px solid transparent;
  border-radius:var(--r-sm); background:var(--fill); color:var(--text); font-weight:var(--weight-semibold); cursor:pointer; text-decoration:none; text-align:center; }
.btn:hover { background:var(--fill-2); }
.btn.primary { background:var(--accent-fill); color:var(--on-fill); }
.btn.primary:hover { background:var(--accent-fill-hover); } .btn.primary:active { background:var(--accent-fill-pressed); }
.btn.ghost { background:transparent; border-color:var(--line-2); font-weight:var(--weight-medium); } .btn.ghost:hover { background:var(--fill); }
.btn.wide { width:100%; } .btn:disabled { opacity:.55; cursor:not-allowed; }
input, select, textarea { font-size:var(--fs-input); width:100%; min-height:var(--tap); border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--raise); color:var(--text); padding:0 var(--space-3); }
input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); outline:none; }
input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:1px; }
.note { font-size:var(--fs-meta); color:var(--muted); } .note.bad { color:var(--bad); }   /* красный — только ошибка */
.ok { color:var(--ok); font-weight:var(--weight-strong); }
.link { all:unset; cursor:pointer; color:var(--accent-text); font-size:var(--fs-meta); font-weight:var(--weight-semibold); padding:var(--space-2) 0; }
.link:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:var(--r-tag); }
summary { cursor:pointer; }

/* Публичные страницы: одна шапка с навигацией и переключателем языка, колонка текста ~70 знаков */
.pub-head { max-width:70ch; margin:0 auto; padding:var(--space-4) var(--space-4) var(--space-3); display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-4);
  border-bottom:1px solid var(--line); }
.pub-brand { font-weight:var(--weight-heading); color:var(--text); text-decoration:none; margin-inline-end:auto; }
.pub-nav { display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-3); }
.pub-nav a, .pub-lang { color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; padding:var(--space-1) 0; }
.pub-nav a[aria-current="page"] { color:var(--text); text-decoration:none; font-weight:var(--weight-strong); }
.pub-lang { font-weight:var(--weight-semibold); }
@media (max-width:560px) { .pub-nav { order:3; flex-basis:100%; } }   /* телефон: название и язык — первой строкой, разделы — второй */
main.doc { max-width:70ch; margin:0 auto; padding:var(--space-8) var(--space-4) 64px; }
.doc h1 { font-size:clamp(var(--fs-metric), 6vw, var(--fs-metric-xl)); line-height:1.05; margin:0 0 var(--space-2); }
.doc h2 { font-size:var(--fs-subtitle); margin:var(--space-8) 0 var(--space-2); }
.doc p, .doc li { margin:var(--space-1) 0; } .doc ul, .doc ol { padding-inline-start:var(--space-5); }
.doc .muted { font-size:var(--fs-meta); }
.doc hr { border:0; border-top:1px solid var(--line); margin:var(--space-8) 0; }
.doc a { color:var(--accent-text); text-decoration:underline; }
.doc .lead { font-size:var(--fs-subtitle); }
.doc .grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap:var(--space-3); margin-top:var(--space-4); }
.doc .card { width:auto; display:block; background:var(--sunken); border:0; box-shadow:none; border-radius:var(--r-inner); padding:var(--space-3) var(--space-4); }
.doc .card b { display:block; margin-bottom:var(--space-1); }
.doc a.yt { display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-1) var(--space-3); border:1px solid var(--line-2); border-radius:var(--r-pill); font-size:var(--fs-meta);
  color:var(--text); text-decoration:none; }
.doc .yt svg { width:22px; height:16px; }

/* Общая оболочка пути «Компания → Telegram → Настройка», в стиле экрана входа. */
.journey { min-height:100svh; }
.journey-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:28px 40px; }
.journey-brand { display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; min-width:0; }
.journey-brand .brand-mark { width:36px; height:36px; border-radius:10px; background:var(--accent-fill); font-size:20px; }
.journey-brand strong { display:block; font-size:15px; font-weight:650; line-height:1.3; overflow-wrap:anywhere; }
.journey-brand small { display:block; margin-top:2px; color:var(--muted); font-size:12px; }
.journey-header .btn { min-height:44px; padding:8px 12px; font-size:13px; font-weight:500; background:transparent; color:var(--text-2); }
.journey-header .btn:hover { background:var(--fill); }
.journey-main { width:min(540px,100%); margin:36px auto 64px; padding:0 24px; }
.journey-card { background:var(--glass-sheen), var(--glass-card); border:1px solid var(--glass-stroke); border-radius:28px; padding:32px; box-shadow:var(--glass-edge), var(--shadow); }
.journey h1 { font-size:28px; font-weight:650; line-height:1.1; letter-spacing:-.025em; text-wrap:balance; }
.journey h2 { font-size:19px; font-weight:650; line-height:1.1; }
.journey .intro { font-size:15px; color:var(--text-2); line-height:1.6; margin-top:12px; }
.journey-steps { display:flex; list-style:none; padding:0; margin:0 0 28px; gap:12px; font-size:12px; color:var(--muted); }
.journey-steps li { flex:1; padding-top:10px; border-top:2px solid var(--line-2); }
.journey-steps [aria-current] { border-color:var(--accent-text); color:var(--text); font-weight:650; }
.journey-steps .complete { border-color:var(--ok); }
.journey :is(input:not([type=checkbox]),textarea,select) { min-height:48px; font-size:16px; background:var(--bg); caret-color:var(--accent-text); }
.journey input::placeholder,.journey textarea::placeholder { color:var(--muted); opacity:1; }
.journey .btn { min-height:48px; padding:12px 16px; font-size:15px; line-height:1.4; font-weight:590; }
.journey-header .btn { min-height:44px; padding:8px 12px; font-size:13px; }
.journey .link { display:inline-flex; align-items:center; min-height:44px; font-weight:500; }
.journey summary { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; list-style:none; color:var(--text-2); }
.journey summary::-webkit-details-marker { display:none; }
.journey summary::after { content:""; width:7px; height:7px; flex:none; border-inline-end:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.journey details[open]>summary::after { transform:rotate(225deg); }
.journey :is(a,button,input,textarea,select,summary):focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; }
.journey ::selection { background:var(--accent-soft); color:var(--text); }
html:has(.journey) { scrollbar-color:var(--muted) var(--bg); scroll-padding-top:24px; }
.journey-footer { margin:22px auto 0; font-size:13px; color:var(--muted); text-align:center; line-height:1.6; }
.journey-footer a { display:inline-flex; align-items:center; min-height:44px; }
@media(max-width:600px) {
 .journey-header { padding:20px; gap:12px; flex-wrap:wrap; }
 .journey-main { margin:20px auto 40px; padding:0 20px; }
 .journey-card { padding:28px 24px; }
 .journey-steps { gap:10px; margin-bottom:24px; }
}
@media(max-width:380px) {
 .journey-header { padding:16px; }
 .journey-brand { gap:8px; }
 .journey-brand strong { font-size:14px; }
 .journey-main { padding:0 16px; }
 .journey-card { padding:24px 20px; }
}

/* Размытие — только у отдельных окон; длинные формы и документы без отдельного фильтра. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root { --glass-card:color-mix(in srgb, var(--panel) 82%, transparent); --glass-pop:color-mix(in srgb, var(--raise) 84%, transparent); }
  body.center > .card, .journey-card { -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
}
.environment-note { align-self:flex-start; font-size:var(--fs-micro); color:var(--warn); }
.dev-login h1 { font-size:var(--fs-title); }
.dev-login label { font-size:var(--fs-meta); font-weight:600; }
.dev-login #msg:empty { display:none; }
@media (prefers-reduced-transparency:reduce), (forced-colors:active) {
  :root { --glass-card:var(--panel); --glass-pop:var(--raise); --glass-sheen:none; --glass-blur:none; }
  body { background:var(--bg); }
}

/* Shared public questionnaire, also used for the submitted state. */
.public-form { display:grid; gap:var(--space-4); }
.public-form form { display:grid; gap:var(--space-6); }
.public-form label { display:grid; gap:var(--field-gap); font-weight:var(--weight-semibold); }
.public-form textarea { min-height:120px; padding:var(--space-3); resize:vertical; font-weight:var(--weight-regular); }
.public-form .btn { justify-self:start; }
@media (max-width:600px) {
  body.center { padding:var(--space-4); }
  .card { --panel-px:16px; --panel-py:20px; }
  .public-form .btn { width:100%; }
}