— наполняет atlas-shell.js. */ body.atlas{display:grid;grid-template-columns:var(--нав-ширина) 1fr; min-height:100vh;transition:grid-template-columns var(--темп)} html.нав-узкая body.atlas{grid-template-columns:var(--нав-узкая) 1fr} /* ---------------- левая навигация ---------------- */ #атлас-нав{position:sticky;top:0;height:100vh;z-index:var(--слой-нав); background:var(--surface);border-right:1px solid var(--rule); display:flex;flex-direction:column;overflow:hidden} .нав-шапка{display:flex;align-items:center;gap:9px; padding:calc(var(--шаг)*1.5) calc(var(--шаг)*1.75);min-height:var(--верх-высота)} .нав-шапка .лого-атлас{display:flex;align-items:center;gap:9px; font-weight:700;font-size:16.5px;letter-spacing:.01em;color:inherit; text-decoration:none;white-space:nowrap;overflow:hidden} .нав-шапка .лого-атлас span{color:var(--muted);font-weight:500} .нав-свиток{flex:1;overflow-y:auto;overflow-x:hidden; padding:0 calc(var(--шаг)*1) calc(var(--шаг)*2)} .нав-группа{margin-top:calc(var(--шаг)*1.75)} .нав-группа>.нав-заголовок{font-family:var(--моно);font-size:var(--текст-к); letter-spacing:.09em;text-transform:uppercase;color:var(--muted); padding:0 calc(var(--шаг)*1) calc(var(--шаг)*.75);white-space:nowrap} .нав-пункт{display:flex;align-items:center;gap:10px;width:100%; padding:calc(var(--шаг)*.9) calc(var(--шаг)*1);border-radius:var(--радиус-м); color:var(--ink-2);text-decoration:none;font-size:var(--текст); white-space:nowrap;position:relative;border:none;background:none; font-family:inherit;cursor:pointer;text-align:left} .нав-пункт:hover{background:var(--surface-2);color:var(--ink)} .нав-пункт.вкл{background:var(--accent-soft);color:var(--accent);font-weight:600} .нав-пункт.вкл::before{content:"";position:absolute;left:-8px;top:20%; bottom:20%;width:3px;border-radius:2px;background:var(--accent)} .нав-пункт .значок{flex:none;width:19px;height:19px;stroke:currentColor} .нав-пункт .подпись{overflow:hidden;text-overflow:ellipsis} .нав-низ{border-top:1px solid var(--rule);padding:calc(var(--шаг)*1)} #кнСвернутьНав{display:flex;align-items:center;gap:10px;width:100%; padding:calc(var(--шаг)*.9) calc(var(--шаг)*1);border:none;background:none; color:var(--muted);font-family:inherit;font-size:var(--текст-м); border-radius:var(--радиус-м);cursor:pointer;white-space:nowrap} #кнСвернутьНав:hover{background:var(--surface-2);color:var(--ink)} #кнСвернутьНав .значок{flex:none;width:18px;height:18px;stroke:currentColor; transition:transform var(--темп)} html.нав-узкая #кнСвернутьНав .значок{transform:rotate(180deg)} /* свёрнутая: остаются только значки */ html.нав-узкая .нав-пункт{justify-content:center;padding-left:0;padding-right:0} html.нав-узкая .нав-пункт .подпись, html.нав-узкая .нав-заголовок, html.нав-узкая .лого-атлас .хвост, html.нав-узкая #кнСвернутьНав .подпись{display:none} html.нав-узкая .нав-группа{border-top:1px solid var(--rule); padding-top:calc(var(--шаг)*1)} html.нав-узкая .нав-пункт.вкл::before{left:-4px} /* ---------------- верхняя контекстная панель ---------------- */ .атлас-право{min-width:0;display:flex;flex-direction:column} #атлас-верх{position:sticky;top:0;z-index:var(--слой-верх); background:var(--paper);border-bottom:1px solid var(--rule); min-height:var(--верх-высота)} .атлас-верх-внутри{width:min(100%,var(--контент-макс));min-height:var(--верх-высота); margin:0 auto;padding:0 var(--поле-страницы);display:flex;align-items:center; gap:calc(var(--шаг)*1.5);min-width:0} #атлас-верх .титул{font-size:16.5px;font-weight:700;white-space:nowrap} #атлас-верх .контекст{color:var(--muted);font-size:var(--текст-м); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #атлас-верх .распорка{margin-left:auto} #кнПалитра{display:flex;align-items:center;gap:8px;height:var(--контрол); padding:0 12px;border:1px solid var(--rule);border-radius:var(--радиус-м); background:var(--surface);color:var(--muted);font-family:inherit; font-size:var(--текст-м);cursor:pointer;white-space:nowrap} #кнПалитра:hover{border-color:var(--rule-2);color:var(--ink)} #кнПалитра kbd{font-family:var(--моно);font-size:10.5px;border:1px solid var(--rule); border-radius:5px;padding:1px 5px;background:var(--surface-2)} #атлас-верх .действия-страницы{display:flex;gap:calc(var(--шаг)*1);align-items:center} main.атлас-содержимое{width:min(100%,var(--контент-макс));margin:0 auto; padding:var(--поле-страницы);min-width:0} /* ---------------- side sheet ---------------- */ #атлас-затемнение{position:fixed;inset:0;background:rgba(0,0,0,.44); z-index:calc(var(--слой-лист) - 1);opacity:0;pointer-events:none; transition:opacity var(--темп-лист)} #атлас-затемнение.видно{opacity:1;pointer-events:auto} #атлас-лист{position:fixed;top:0;right:0;bottom:0;width:var(--лист-ширина); background:var(--surface);border-left:1px solid var(--rule); z-index:var(--слой-лист);transform:translateX(102%); transition:transform var(--темп-лист);display:flex;flex-direction:column; box-shadow:var(--тень-2)} #атлас-лист.виден{transform:none} #атлас-лист .лист-шапка{display:flex;align-items:center;gap:12px; padding:calc(var(--шаг)*1.75) calc(var(--шаг)*2.25); border-bottom:1px solid var(--rule)} #атлас-лист .лист-шапка .титул{font-weight:700;font-size:15.5px;flex:1;min-width:0} #атлас-лист .лист-тело{flex:1;overflow-y:auto;padding:calc(var(--шаг)*2.25)} /* ---------------- командная палитра (⌘K) ---------------- */ #атлас-палитра{position:fixed;inset:0;z-index:var(--слой-палитра); display:none;align-items:flex-start;justify-content:center; padding:12vh 16px 16px;background:rgba(0,0,0,.44)} #атлас-палитра.видна{display:flex} #атлас-палитра .окно-палитры{width:min(600px,100%);background:var(--surface); border:1px solid var(--rule);border-radius:var(--радиус-б); box-shadow:var(--тень-2);overflow:hidden} #атлас-палитра input{width:100%;border:none;background:none;color:var(--ink); font-family:inherit;font-size:15.5px;padding:16px 18px;outline:none} #атлас-палитра .список-палитры{max-height:min(46vh,420px);overflow-y:auto; border-top:1px solid var(--rule);padding:6px} #атлас-палитра .пункт-палитры{display:flex;align-items:center;gap:11px; padding:9px 12px;border-radius:var(--радиус-м);cursor:pointer; color:var(--ink-2);font-size:var(--текст)} #атлас-палитра .пункт-палитры .значок{flex:none;width:17px;height:17px; stroke:currentColor} #атлас-палитра .пункт-палитры .тип{margin-left:auto;color:var(--muted); font-family:var(--моно);font-size:10.5px;letter-spacing:.06em; text-transform:uppercase} #атлас-палитра .пункт-палитры.вкл{background:var(--accent-soft);color:var(--accent)} #атлас-палитра .пусто-палитры{padding:18px;color:var(--muted); font-size:var(--текст-м);text-align:center} /* ---------------- скелетоны ---------------- */ .скелет{position:relative;overflow:hidden;background:var(--surface-2); border-radius:var(--радиус-м);color:transparent!important;min-height:1em} .скелет::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent,var(--surface-3),transparent); animation:скелет-волна 1.4s infinite} @keyframes скелет-волна{from{transform:translateX(-100%)}to{transform:translateX(100%)}} @media (prefers-reduced-motion: reduce){ .скелет::after{animation:none} #атлас-лист,#атлас-затемнение,body.atlas{transition:none} } /* ---------------- узкие экраны ---------------- */ @media (max-width: 900px){ body.atlas{grid-template-columns:1fr} #атлас-нав{position:fixed;left:0;width:var(--нав-ширина); transform:translateX(-102%);transition:transform var(--темп-лист); box-shadow:var(--тень-2)} html.нав-открыта-мобильно #атлас-нав{transform:none} html.нав-узкая body.atlas{grid-template-columns:1fr} #кнМобНав{display:inline-flex!important} } @media (max-width: 600px){ :root{--поле-страницы:12px} #кнПалитра span,#кнПалитра kbd{display:none} #кнПалитра{width:var(--контрол);padding:0;justify-content:center} } /* ---------------- телефон ---------------- На узком экране шапка раньше не переносилась: поиск, «Excel», «Добавить» и аватар выстраивались в одну несжимаемую строку и уезжали за правый край вместе со всей страницей — прокрутка вбок появлялась на КАЖДОЙ странице. Здесь строка получает право переноса, а поиск — право сжиматься. */ @media (max-width: 700px){ html,body{overflow-x:hidden} .атлас-верх-внутри{flex-wrap:wrap;row-gap:calc(var(--шаг)*.75); padding-top:calc(var(--шаг)*.75);padding-bottom:calc(var(--шаг)*.75)} #атлас-верх .титул{font-size:15px} #атлас-верх .контекст{display:none} #атлас-верх .распорка{margin-left:auto} #кнПалитра{flex:1 1 120px;min-width:0;max-width:100%} #атлас-верх .действия-страницы{flex-wrap:wrap;width:100%; justify-content:flex-start} #атлас-верх .действия-страницы button{flex:0 1 auto;max-width:100%} /* палец, а не курсор: цель меньше 44 px промахивается */ #атлас-верх button,.действия-страницы button{min-height:40px} .карточки{grid-template-columns:1fr 1fr;gap:var(--шаг)} main.атлас-содержимое{padding-left:var(--поле-страницы); padding-right:var(--поле-страницы)} } @media (max-width: 430px){ .карточки{grid-template-columns:1fr} } #кнМобНав{display:none;align-items:center;justify-content:center; width:var(--контрол);height:var(--контрол);border:1px solid var(--rule); border-radius:var(--радиус-м);background:var(--surface);cursor:pointer; color:var(--ink-2);flex:none} #кнМобНав .значок{width:18px;height:18px;stroke:currentColor}