/* Платформа (/) в дизайне «Пикника» (06.10.2026), эталон — design/picnic/ui_kits/platform.
   Подключается последним, после app.css, styles.css системы и legacy-bridge.css:
   разметка app.js почти прежняя, вид — здесь. Только токены системы. */
body{background:var(--bg);color:var(--ink);font:400 15px/1.45 var(--font-sans)}
h1{font:400 30px/1.1 var(--font-display);letter-spacing:-.01em;margin:0 0 6px}
h2{font:var(--t-h3);margin:0 0 10px}
.muted{color:var(--muted);font:var(--t-small)}
a{color:var(--accent-ink)}
:root[data-theme="dark"] a{color:var(--accent)}

/* знак */
.brand{display:flex;flex-direction:column;gap:4px;margin-bottom:24px;text-decoration:none;color:var(--ink)}
.brand .pk-wordmark{font-size:28px}
.brand small{font:var(--t-small);color:var(--muted)}
.top .brand{margin:0}
.top .brand .pk-wordmark{font-size:22px}

/* вход, регистрация, приглашение: форма слева, клетка справа (на узком — полосой снизу) */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr;padding:0;align-items:stretch}
.auth-card{max-width:400px;width:100%;margin:auto;background:none;border:0;box-shadow:none;padding:40px 20px}
.auth::after{content:'';display:block;min-height:220px;--gingham:var(--pk-blue-500);--gingham-cell:40px;
  background-color:var(--gingham-bg);
  background-image:linear-gradient(90deg,color-mix(in srgb,var(--gingham) 42%,transparent) 50%,transparent 50%),linear-gradient(color-mix(in srgb,var(--gingham) 42%,transparent) 50%,transparent 50%);
  background-size:var(--gingham-cell) var(--gingham-cell)}
@media (min-width:900px){.auth{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.auth::after{min-height:100vh}}
label{font:var(--t-label);color:var(--ink-2);margin:16px 0 6px}
input[type=text],input[type=email],input[type=password],select{min-height:44px;border-radius:var(--r-ctl);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);padding:10px 14px}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:2px}
.btn{min-height:var(--ctl-h-md);border-radius:var(--r-pill);font:600 14px/1 var(--font-sans)}
.btn.block{margin-top:24px}
.error{color:var(--bad);font:var(--t-small)}
.ok{color:var(--good);font:var(--t-small)}

/* шапка */
.top{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top));gap:8px}
.top>*{max-width:none}
.chip{border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--ink);min-height:36px;font:600 13px/1 var(--font-sans)}
.chip.on{background:var(--surface)}
.pop{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg)}
.pop button:hover,.pop button[aria-current=true]{background:var(--surface-sunken)}
.theme-btn .mi{width:16px;height:16px;background:currentColor;-webkit-mask:url(/design/picnic/icons/moon.svg) center/contain no-repeat;mask:url(/design/picnic/icons/moon.svg) center/contain no-repeat}
.theme-btn.is-dark .mi{-webkit-mask-image:url(/design/picnic/icons/sun.svg);mask-image:url(/design/picnic/icons/sun.svg)}

/* колонка */
main{max-width:760px;padding:20px 16px 56px;gap:12px}
@media (min-width:768px){main{padding:28px 24px 64px}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:20px}
.card h2{font:var(--t-h3)}

/* карточка пространства */
.hero{display:flex;padding:0;overflow:hidden}
.hero-b{flex:1;min-width:0;padding:24px;display:flex;flex-direction:column;gap:6px}
.hero-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hero h1{font:400 30px/1.1 var(--font-display);margin:6px 0 10px}
.hero .btn{width:auto;align-self:flex-start;min-height:var(--ctl-h-lg);padding:0 24px;font-size:15px;margin:0}
.hero-cloth{width:56px;flex:none;--gingham:var(--pk-blue-500);--gingham-cell:14px}
@media (max-width:480px){.hero .btn{align-self:stretch}.hero-cloth{width:28px;--gingham-cell:10px}}

/* группы-списки */
.group-t{font:var(--t-caption);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--muted);margin:14px 4px -2px}
.group{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.li{min-height:64px;padding:12px 16px;border-top:1px solid var(--line-soft);color:var(--ink)}
.li:hover{background:var(--surface-2,var(--surface-sunken))}
.li .ic{width:36px;height:36px;border-radius:var(--r-sm);background:var(--surface-sunken);color:var(--ink-2)}
.li .t b{font:600 15px/1.3 var(--font-sans)}
.li .t small{font:var(--t-small);color:var(--muted)}
.li.danger b{color:var(--bad)}
.li.danger .ic{background:var(--bad-bg);color:var(--bad)}
.st.pk-badge{height:24px;padding:0 10px}

/* мастер, проверки, шаги */
.progress{height:8px;background:var(--surface-sunken);border-radius:var(--r-pill)}
.progress i{background:var(--accent)}
.step{border-top:1px solid var(--line-soft)}
.step-n{border-color:var(--line-strong);color:var(--muted);font:600 13px/1 var(--font-sans)}
.step.done .step-n{background:var(--good);border-color:var(--good);color:var(--on-accent,#fff)}
.step.current .step-n{border-color:var(--accent);color:var(--accent)}
.check-row{border-top:1px solid var(--line-soft)}
.check-row.ok .check-ic{color:var(--good)}
.check-row.bad .check-ic{color:var(--bad)}

/* внутренние страницы */
.page-h{gap:12px;margin:0 0 6px;align-items:center}
.page-h h1{font:400 28px/1.1 var(--font-display);margin:0}
.back{height:36px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:600 13px/1 var(--font-sans)}
.list>.row{border-top:1px solid var(--line-soft)}
.tag{border-radius:var(--r-pill);background:var(--surface-sunken);border:0;color:var(--ink-2);font:600 12px/1 var(--font-sans);padding:5px 9px}
.tag.on{background:var(--good-bg);color:var(--good)}
.sep{border-top-color:var(--line-soft)}
.rule-g{font:var(--t-caption);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--muted)}
.rules>.rule-h{border-top:1px solid var(--line-soft)}
.rule-h input{accent-color:var(--accent)}

/* приглашение: что откроется */
.sees{display:grid;gap:6px;margin:14px 0 4px;padding:14px 16px;border-radius:var(--r-md);background:var(--surface-sunken)}
.sees-t{font:var(--t-label);color:var(--ink)}
.sees-r{font:var(--t-small);color:var(--ink-2);padding-left:22px;position:relative}
.sees-r::before{position:absolute;left:0;top:0;font-weight:700}
.sees-r.yes::before{content:'+';color:var(--good)}
.sees-r.no{color:var(--muted)}
.sees-r.no::before{content:'−';color:var(--muted)}

/* гайд (/help) */
.doc h1{font:400 32px/1.1 var(--font-display)}
.doc h2{font:var(--t-h2)}
.doc code{background:var(--surface-sunken);border:0;border-radius:6px}
.tbl th,.tbl td{border-color:var(--line)}
.tbl th{background:var(--surface-sunken)}
/* шапка вровень с колонкой (760) */
.top{padding-left:max(16px,calc((100% - 760px) / 2 + 16px));padding-right:max(16px,calc((100% - 760px) / 2 + 16px))}
@media (min-width:768px){.top{padding-left:max(24px,calc((100% - 760px) / 2 + 24px));padding-right:max(24px,calc((100% - 760px) / 2 + 24px))}}
a.li,a.li b{color:var(--ink)}
a.li.danger b{color:var(--bad)}
/* вход: «Забыли пароль?», «‹ Ко входу»; сообщение «проверьте почту» */
.auth-alt{margin:14px 0 0;text-align:center;color:var(--muted);font-size:14px}
a.linkbtn{text-decoration:none;display:inline-flex;align-items:center}
.linkbtn{background:none;border:0;padding:10px 4px;min-height:44px;font:inherit;font-size:14px;color:var(--accent);cursor:pointer}
.linkbtn:hover{color:var(--accent-hover)}
.linkbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.note.good{background:var(--good-bg);color:var(--ink);border-radius:var(--r-md);padding:12px 14px;font-size:14px;line-height:1.45;margin:0 0 14px}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
/* Галочка согласия в формах регистрации и приглашения */
.consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 14px;font-size:13px;line-height:1.45;color:var(--ink-2);cursor:pointer}
.consent input{margin-top:2px;width:18px;height:18px;flex:none;accent-color:var(--accent)}
.consent a{color:var(--accent)}
/* Точки и часы работы */
.point{padding:4px 0 14px;border-bottom:1px solid var(--line-soft);margin-bottom:14px}
.point-dep{font-size:13px;margin:6px 0 12px}
/* Шаги настройки на узком экране: кнопка уходит под текст, а не сжимает его до «Проверь / те» */
.step{flex-wrap:wrap}
.step .grow{flex:1 1 180px;min-width:0}
.step>.btn{margin-left:auto}