/* ============================================================
   Навигатор сервисов a.sgbm.biz. Настройки — в :root.
   ============================================================ */
:root{
  --ink:#12261f; --paper:#f6f4ee; --line:#d9d3c4; --seal:#1f5c46;
  --seal-soft:#eaf1ed; --muted:#5f6b62; --card:#fffdf8; --code-bg:#eeebe2;
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Segoe UI",-apple-system,Roboto,Arial,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--seal)}
.wrap{max-width:720px;margin:0 auto;padding:56px 24px 80px}

header{margin-bottom:26px}
.badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--seal);
  font-weight:600;margin-bottom:12px}
.badge svg{width:15px;height:15px}
h1.site{font-family:Georgia,"Times New Roman",serif;font-weight:600;font-size:34px;
  line-height:1.15;margin:0 0 8px;letter-spacing:-.01em}
.subtitle{color:var(--muted);font-size:15px;margin:0;max-width:60ch}

.cards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:border-color .18s,box-shadow .18s,transform .18s}
.card:hover{border-color:#c3bca9;box-shadow:0 4px 18px rgba(30,60,45,.07)}
.card.open{border-color:var(--seal);box-shadow:0 6px 22px rgba(31,92,70,.12)}

.card-main{display:flex;align-items:center;gap:16px;padding:16px 18px}

.card-ico{flex:none;width:46px;height:46px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--seal-soft);color:var(--seal)}
.card-ico img{width:100%;height:100%;object-fit:contain}
.card-letter{font-family:Georgia,serif;font-size:22px;font-weight:600}
.card-emoji{background:transparent;font-size:26px;line-height:1}

.card-link{flex:1;min-width:0;text-decoration:none;color:inherit;display:block}
.card-name{display:block;font-weight:600;font-size:17px}
.card-desc{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.card-url{display:block;color:#a49b86;font-size:12.5px;margin-top:3px;
  font-family:ui-monospace,Consolas,monospace}

/* стрелка-подсказка справа: вся карточка — ссылка */
.card-arrow{flex:none;color:#c3bca9;transition:color .15s,transform .15s;
  display:flex;align-items:center}
.card-arrow svg{width:18px;height:18px}
.card-main:hover .card-arrow{color:var(--seal);transform:translateX(2px)}

/* кнопка «Справка» — во всю ширину карточки, край в край, без скруглений */
.toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  cursor:pointer;border:0;border-top:1px solid var(--line);background:var(--seal-soft);
  color:var(--seal);padding:12px 18px;font-size:13.5px;font-weight:600;
  font-family:inherit;transition:background .15s}
.toggle:hover{background:#dfe9e3}
.toggle svg{width:16px;height:16px;transition:transform .25s ease}
.card.open .toggle svg{transform:rotate(180deg)}
.card.open .toggle{background:var(--seal);color:#fff}



/* раскрывающаяся справка — плавная анимация высоты */
.card-doc{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.4,0,.2,1)}
.card-doc-inner{padding:2px 20px 20px;margin-top:0}
.card.open .card-doc-inner{animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* оформление md внутри справки */
.content h1{font-size:20px;font-family:Georgia,serif;margin:16px 0 8px}
.content h2{font-size:17px;font-family:Georgia,serif;margin:16px 0 6px;
  padding-bottom:4px;border-bottom:1px solid var(--line)}
.content h3{font-size:15px;margin:12px 0 5px}
.content p{margin:8px 0}
.content ul,.content ol{margin:8px 0;padding-left:22px}
.content li{margin:3px 0}
.content a{color:var(--seal);text-decoration:underline;text-underline-offset:2px}
.content code{background:var(--code-bg);padding:2px 6px;border-radius:4px;
  font-family:ui-monospace,Consolas,monospace;font-size:13px}
.content pre{background:#1c2b24;color:#e8e4d8;padding:12px 14px;border-radius:9px;
  overflow-x:auto;margin:12px 0}
.content pre code{background:0;padding:0;color:inherit}
.content blockquote{margin:12px 0;padding:2px 16px;border-left:3px solid var(--seal);
  background:var(--seal-soft);border-radius:0 8px 8px 0}
.content table{border-collapse:collapse;width:100%;margin:12px 0;font-size:14px}
.content th,.content td{border:1px solid var(--line);padding:7px 10px;text-align:left}
.content th{background:var(--seal-soft);font-weight:600}
.content img{max-width:100%;border-radius:8px}

/* выравнивание картинок/видео (блочно, без обтекания) */
.content .md-media{display:block;margin:12px 0}
.content .md-media img,.content .md-media video{margin:0;display:block}
.content .md-media.align-left{text-align:left}
.content .md-media.align-center{text-align:center}
.content .md-media.align-right{text-align:right}
.content .md-media.align-center img,.content .md-media.align-center video{margin-left:auto;margin-right:auto}
.content .md-media.align-right img,.content .md-media.align-right video{margin-left:auto}
.content .md-video{max-width:100%;width:100%;border-radius:9px;margin:12px 0;background:#000;display:block}

.empty{color:#b0a892;font-style:italic}
footer{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);
  color:#a49b86;font-size:12.5px;display:flex;justify-content:space-between}

@media (max-width:520px){
  .wrap{padding:38px 16px 60px}
  h1.site{font-size:27px}
  .card-main{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card-doc{transition:none}
  *{animation:none!important}
}