/* Страница «Сигналы и оповещения». Цвета берутся из style.css, внешних шрифтов нет. */
.sg{max-width:920px; margin:0 auto; padding:0 16px 72px}
.sg a{color:var(--accent)}
.sg code, .mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}

/* шапка страницы */
.topnav{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.topnav__link{color:var(--muted); text-decoration:none; font-size:14px; padding:6px 8px}
.topnav__link:hover{color:var(--text)}
.topnav .btn{text-decoration:none; display:inline-block}
.btn--primary{background:var(--accent); color:#0B0F14; border-color:var(--accent); font-weight:650}
.btn--primary:hover{filter:brightness(1.08); border-color:var(--accent)}

.sg-hero{padding:40px 0 24px; border-bottom:1px solid var(--border)}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border:1px solid var(--border); padding:4px 10px; border-radius:6px; margin-bottom:16px}
.eyebrow i{width:6px; height:6px; border-radius:50%; background:var(--up); box-shadow:0 0 0 3px rgba(63,182,139,.18)}
.sg-hero h1{font-size:clamp(30px,5vw,42px); line-height:1.1; margin-bottom:12px}
.sg-sub{font-size:17px; color:var(--muted); max-width:660px; margin-bottom:16px}
.sg-meta{font-size:13px; color:var(--muted)}

.toc{display:flex; flex-wrap:wrap; gap:8px; padding:16px 0 24px; border-bottom:1px solid var(--border); margin-bottom:12px}
.toc a{font-size:13px; color:var(--muted); text-decoration:none; border:1px solid var(--border); border-radius:999px; padding:6px 13px; background:var(--surface)}
.toc a:hover{color:var(--text); border-color:var(--accent)}

.sg section{margin:48px 0; scroll-margin-top:72px}
.sh{display:flex; align-items:baseline; gap:12px; margin-bottom:6px}
.sh__n{color:var(--accent); font-size:14px; font-weight:650}
.sh h2{font-size:22px}
.dek{color:var(--muted); font-size:15px; max-width:680px; margin:10px 0 22px}
.sg p{margin:0 0 14px}
.prose p{max-width:680px}

.cat{display:flex; align-items:center; gap:10px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:30px 0 14px}
.cat::after{content:""; flex:1; height:1px; background:var(--border)}

.sg-legend{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:20px; font-size:13px; color:var(--muted)}
.sg-legend span{display:inline-flex; align-items:center; gap:6px}

.pill{font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:999px; white-space:nowrap; border:1px solid var(--border); flex:none}
.pill.safe{color:var(--up); border-color:rgba(63,182,139,.5); background:rgba(63,182,139,.08)}
.pill.caution{color:var(--warn); border-color:rgba(217,164,65,.5); background:rgba(217,164,65,.08)}
.pill.risk{color:var(--down); border-color:rgba(232,101,122,.5); background:rgba(232,101,122,.08)}

.cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.scard{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; min-width:0}
.scard__head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px}
.scard__name{font-weight:650; font-size:15px; overflow-wrap:anywhere}
.scard__name a, .sg-pick h3 a, .sg-note a{color:inherit; text-decoration:none; border-bottom:1px dotted var(--muted)}
.scard__name a:hover, .sg-pick h3 a:hover, .sg-note a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.scard__desc{font-size:14px; margin-bottom:10px}
.scard__meta{font-size:12px; color:var(--muted); margin-bottom:8px}
.scard__rev{font-size:13px; color:var(--muted); border-top:1px dashed var(--border); padding-top:8px; margin-top:8px}
.scard__rev b{color:var(--text); font-weight:600}

.sg-note{border-radius:var(--radius); padding:16px 18px; margin:20px 0; border:1px solid var(--border); background:var(--surface)}
.sg-note h3{font-size:15px; margin-bottom:8px}
.sg-note p, .sg-note li{font-size:14px}
.sg-note p:last-child{margin-bottom:0}
.sg-note--warn{border-color:rgba(232,101,122,.45); background:rgba(232,101,122,.06)}
.sg-note--warn h3{color:var(--down)}
.sg-note--info{border-color:rgba(107,154,196,.45); background:var(--accent-soft)}
.sg-note--info h3{color:var(--accent)}

.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:18px 0 22px}
.stat{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px}
.stat b{display:block; font-size:22px; color:var(--down); font-variant-numeric:tabular-nums}
.stat span{display:block; font-size:12.5px; color:var(--muted); margin-top:2px}

.sg-pick{display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--radius); padding:20px 22px; margin-bottom:16px}
.sg-pick__n{font-size:26px; font-weight:700; color:var(--accent)}
.sg-pick h3{font-size:17px; margin-bottom:4px}
.sg-pick .for{font-size:13px; color:var(--muted); margin-bottom:10px}
.sg-pick p{font-size:14.5px; max-width:640px}
.steps{margin:12px 0 0; padding:0; list-style:none; counter-reset:step}
.steps li{counter-increment:step; position:relative; padding-left:32px; font-size:14px; margin-bottom:8px; min-height:22px}
.steps li::before{content:counter(step); position:absolute; left:0; top:1px; font-size:11px; font-weight:650; color:var(--accent); background:var(--accent-soft); width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center}
.steps a{overflow-wrap:anywhere}

.flags{list-style:none; padding:0; margin:10px 0 0}
.flags li{display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; font-size:14px; margin-bottom:9px}
.flags li::before{content:"\2715"; color:var(--down); font-weight:700; font-size:12px; line-height:1.6}

.cta{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; margin:36px 0 0}
.cta h3{font-size:18px; margin-bottom:4px}
.cta p{color:var(--muted); font-size:14px; margin:0}
.cta .btn{padding:11px 18px; font-size:15px; text-decoration:none; display:inline-block}

.srcc{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:18px 0 8px}
.srcg{display:grid; grid-template-columns:1fr 1fr; gap:4px 24px; font-size:13px}
.srcg a{color:var(--muted); text-decoration:none; overflow-wrap:anywhere}
.srcg a:hover{color:var(--accent); text-decoration:underline}

@media (max-width:640px){
  .cards, .stats, .srcg{grid-template-columns:1fr}
  .sg-pick{grid-template-columns:1fr; gap:6px; padding:18px}
  .topbar__in .brand__sub{display:none}
  .sg-hero{padding-top:28px}
}
.sg a.btn--primary{color:#0B0F14}
.cta > div{flex:1 1 340px}

/* ежедневная проверка сервисов */
.sg-status{margin:20px 0 4px; padding:14px 18px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface)}
.sg-status--ok{border-color:rgba(63,182,139,.45)}
.sg-status--warn{border-color:rgba(217,164,65,.55)}
.sg-status p{margin:0 0 6px; font-size:14px}
.sg-status p:last-child{margin-bottom:0}
.sg-status__head{font-weight:650}
.sg-status--ok .sg-status__head{color:var(--up)}
.sg-status--warn .sg-status__head{color:var(--warn)}
.sg-status__line--down{color:var(--down)}
.sg-status__line--changed{color:var(--warn)}
.sg-status__fine{color:var(--muted); font-size:12.5px !important; margin-top:8px !important}
.sg-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.sg-chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:3px 9px; border-radius:999px; border:1px solid var(--border); color:var(--muted); background:var(--surface-2); overflow-wrap:anywhere}
.sg-chip::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--muted); flex:none}
.sg-chip--ok{color:var(--up); border-color:rgba(63,182,139,.45)} .sg-chip--ok::before{background:var(--up)}
.sg-chip--slow{color:var(--warn); border-color:rgba(217,164,65,.45)} .sg-chip--slow::before{background:var(--warn)}
.sg-chip--changed{color:var(--warn); border-color:rgba(217,164,65,.55)} .sg-chip--changed::before{background:var(--warn)}
.sg-chip--down{color:var(--down); border-color:rgba(232,101,122,.55); background:rgba(232,101,122,.08)} .sg-chip--down::before{background:var(--down)}
.sg-chip--blocked::before{background:var(--muted)}
.scard.sg--down, .sg-pick.sg--down{border-color:rgba(232,101,122,.6)}
.scard.sg--changed, .sg-pick.sg--changed{border-color:rgba(217,164,65,.6)}