/* ============================================================
   Сайдбар отдельных страниц (Инструменты, Словарь) — как в приложении:
   фон с лёгким фиолетовым свечением у логотипа, узел, «свернуть меню», замок у «Эфиров».
   Правила взяты из assistant.css и lesson-split.css приложения; .app.rail там = body.rail здесь.
   ============================================================ */
html:not([data-theme="dark"]) .side{background:linear-gradient(180deg,#FFFFFF 0%,#FDFCFF 62%,#FAF8FE 100%)}
.side__top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px}
.side__top::after{content:'';position:absolute;left:14px;top:-26px;width:150px;height:150px;pointer-events:none;
  background:radial-gradient(circle,rgba(201,167,255,.26) 0%,rgba(98,0,255,.05) 50%,transparent 72%)}
html[data-theme="dark"] .side__top::after{background-image:radial-gradient(circle,rgba(56,35,90,.26) 0%,rgba(98,0,255,.05) 50%,transparent 72%)}
.side__top .wordmark,.side__top button{position:relative;z-index:1}
.side__top .wordmark b{color:var(--ink,#111114)}

.rail-t{flex:none;width:32px;height:32px;border-radius:10px;border:0;background:none;color:#A1A1AA;display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.rail-t:hover{background:var(--faint,#F1F1F4);color:var(--ink,#111114)}
.rail-t svg{transition:transform .25s}
html[data-theme="dark"] .rail-t:hover{background-color:var(--faint,#1E1E25);color:var(--ink,#F1F1F3)}

.nav-lock{margin-left:auto;display:inline-flex;opacity:.8}
.nav a .nav-lock svg{stroke:#A1A1AA}

@media(min-width:1081px){
  .shell{transition:grid-template-columns .25s cubic-bezier(.22,1,.36,1)}
  body.rail{--sidebar:76px}
  body.rail .side__top{flex-direction:column;padding:20px 0 10px;gap:12px}
  body.rail .side__top .theme-t{margin-left:0}
  body.rail .wordmark b{display:none}
  body.rail .rail-t svg{transform:rotate(180deg)}
  body.rail .nav{padding:8px 12px}
  body.rail .nav a{font-size:0;gap:0;justify-content:center;padding:0;height:44px}
  body.rail .nav a svg{width:20px;height:20px}
  body.rail .nav a .n,body.rail .nav-free,body.rail .nav-stu,body.rail .nav-lock{display:none}
  body.rail .side__foot{padding:10px 8px}
  body.rail .sf-links,body.rail .sf-t,body.rail .sf-out,body.rail .sf-up>span{display:none!important}
  body.rail .sf-me,body.rail .sf-up{justify-content:center}
}
@media(max-width:1080px){.rail-t{display:none}}