/* CPLY — операционная статус-страница compliance. Light-only, vanilla CSS (без внешних
   шрифтов/CDN — контракт manifest-tech-core). Референс-грамматика: спокойный status-page,
   акцент только на статус-вердикте. */
:root{
  /* статусная семантика (имена потребляются пилюлями и .timeline .bar.*) */
  --ok:#1f9d63;--warn:#d98a00;--bad:#e5484d;--bad-full:#d3353a;--maint:#2f6df6;
  /* поверхности и текст */
  --bg:#fbfbfc;--modal-bg:#ffffff;--ink:#16191f;--mute:#5b6573;--line:#e7e9ec;
  --surface-2:#f4f6f8;
  /* бренд / интерактив */
  --primary:#2f6df6;--primary-ink:#ffffff;--primary-hover:#265fdc;--focus:#2f6df6;
  /* шкала радиусов */
  --radius-xs:0.125rem;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;
  --font-sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:"Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;padding:0;font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{line-height:1.2;letter-spacing:-0.02em;font-weight:650}
p{margin:0 0 0.75rem}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
strong{font-weight:600}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-xs)}

/* --- header --- */
.hdr{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:0.875rem 1.5rem;background:color-mix(in srgb, var(--modal-bg) 88%, transparent);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.logo{font-weight:700;font-size:1.0625rem;letter-spacing:-0.03em;color:var(--ink)}
.logo:hover{text-decoration:none}

/* --- buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;padding:0.5rem 1rem;font:inherit;font-weight:600;font-size:0.9375rem;line-height:1.2;border:1px solid var(--primary);border-radius:var(--radius-md);background:var(--primary);color:var(--primary-ink);cursor:pointer;transition:background .12s ease, border-color .12s ease, transform .04s ease}
.btn:hover{background:var(--primary-hover);border-color:var(--primary-hover);text-decoration:none;color:var(--primary-ink)}
.btn:active{transform:translateY(1px)}
.btn.cta{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.btn.login{background:var(--modal-bg);border:1px solid var(--line);color:var(--ink)}
.btn.login:hover{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
.btn[disabled],.btn.cta[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:active,.btn.cta[disabled]:active{transform:none}

/* --- hero (landing) --- */
.hero{max-width:42rem;margin:4.5rem auto 3rem;padding:0 1.5rem;text-align:center}
.hero h1{font-size:2.25rem;font-weight:700;margin:0 0 0.75rem}
.hero .lede{color:var(--mute);font-size:1.0625rem;margin:0 0 2rem}
#scan-form{display:flex;gap:0.5rem;justify-content:center;flex-wrap:wrap}
#scan-form input[type=text]{flex:1;min-width:14rem;max-width:30rem;padding:0.75rem 0.875rem;font:inherit;font-family:var(--font-mono);font-size:0.9375rem;color:var(--ink);background:var(--modal-bg);border:1px solid var(--line);border-radius:var(--radius-md);transition:border-color .12s ease, box-shadow .12s ease}
#scan-form input[type=text]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent)}
#scan-form button{padding:0.75rem 1.25rem}
#domain-error:not(:empty){color:var(--bad);font-size:0.875rem;margin-top:0.75rem}

/* --- materials feed --- */
.feed{max-width:46rem;margin:3rem auto;padding:0 1.5rem}
.feed h2{font-size:1.25rem;margin:0 0 1rem}
.material{padding:1.25rem 0;border-top:1px solid var(--line)}
.material-title{margin:0 0 0.25rem;font-size:1.0625rem}
.material-date{display:block;color:var(--mute);font-size:0.8125rem;font-family:var(--font-mono);margin-bottom:0.5rem}
.material-faq dt{font-weight:600;margin-top:0.5rem}
.material-faq dd{margin:0 0 0.25rem;color:var(--mute)}
.feed-error{padding:1rem 0;color:var(--mute)}
.empty{color:var(--mute)}

/* --- popup / modal --- */
body:has(.popup)::before{content:"";position:fixed;inset:0;background:rgba(16,19,26,.5);z-index:40}
.popup{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 3rem);max-width:30rem;display:flex;flex-direction:column;background:var(--modal-bg);border:1px solid var(--line);padding:1.75rem;z-index:50;border-radius:var(--radius-xl);box-shadow:0 10px 8px #0000000a, 0 4px 3px #0000001a}
.popup h2{margin:0 0 0.75rem;font-size:1.25rem}
.popup-close{position:absolute;top:0.75rem;right:1rem;background:none;border:none;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--mute)}
.popup-close:hover{color:var(--ink)}
.popup-host{margin-top:1.5rem}

/* --- loader / progress --- */
.loader{display:flex;align-items:center;gap:0.625rem;color:var(--mute);font-size:0.9375rem;padding:1rem}
.loader-anim{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:cply-loader-spin 800ms linear infinite}
.loader-label{color:var(--mute)}
@keyframes cply-loader-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.loader-anim{animation:none;background:var(--mute);border-color:var(--mute)}.btn{transition:none}}

/* --- teaser findings (popup preview) --- */
.teaser-list{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-direction:column;gap:0.5rem;width:100%}
.teaser-finding{display:flex;justify-content:space-between;gap:0.75rem;align-items:baseline;border:1px solid var(--line);border-left:3px solid var(--maint);padding:0.625rem 0.75rem;background:var(--surface-2);border-radius:var(--radius-sm)}
.teaser-finding.sev-critical,.teaser-finding.sev-high{border-left-color:var(--bad)}
.teaser-finding.sev-medium{border-left-color:var(--warn)}
.teaser-finding.sev-low{border-left-color:var(--ok)}
.teaser-finding.sev-info,.teaser-finding.sev-none{border-left-color:var(--maint)}
.teaser-title{font-weight:600}
.teaser-sev{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--mute)}
.teaser-ok{color:var(--ok);font-weight:600;margin:1rem 0 0}
.teaser-err{color:var(--mute);margin:1rem 0}

/* --- status hero (statuspage) — signature: status dot + accent stripe --- */
.status-hero{--accent:var(--mute);max-width:60rem;margin:0 auto;padding:3rem 1.5rem 2.25rem;text-align:center;border-top:3px solid var(--accent)}
.status-hero.status-healthy{--accent:var(--ok)}
.status-hero.status-warning{--accent:var(--warn)}
.status-hero.status-degraded{--accent:var(--bad)}
.status-hero.status-critical{--accent:var(--bad-full)}
.status-hero.status-unknown{--accent:var(--mute)}
.status-hero h1{font-size:1.875rem;margin:0 0 0.5rem;display:inline-flex;align-items:center;gap:0.625rem}
.status-hero h1::before{content:"";width:0.7em;height:0.7em;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);flex:0 0 auto}
.status-hero .summary{color:var(--mute);font-size:1.0625rem;max-width:40rem;margin:0 auto 0.75rem}
.status-hero .meta{color:var(--mute);font-size:0.875rem;margin:0.25rem 0}
.status-hero .meta strong{font-family:var(--font-mono);color:var(--ink)}
@media (min-width:1280px){.status-hero{padding:2.25rem 1.5rem 2rem}}

/* rerun / CTA row under hero */
[data-testid="full-scan-block"]{max-width:60rem;margin:1.25rem auto 0;padding:0 1.5rem;display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap}
[data-testid="full-scan-running"]{display:inline-flex;align-items:center;gap:0.5rem;color:var(--mute);font-size:0.9375rem}
.rescan-timer,.teaser-limit{max-width:60rem;margin:0.5rem auto 0;padding:0 1.5rem;color:var(--mute);font-size:0.875rem}
[data-testid="history-link"],[data-testid="monitoring-connect-cta"],[data-testid="full-scan-paid-note"]{max-width:60rem;margin:1rem auto 0;padding:0 1.5rem}
[data-testid="full-scan-paid-note"]{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;color:var(--mute);font-size:0.9375rem}

/* --- incident banner --- */
.incident-banner{display:flex;align-items:flex-start;gap:0.75rem;max-width:60rem;margin:1.5rem auto 0;padding:1rem 1.25rem;background:var(--modal-bg);border:1px solid var(--bad-full);border-left:3px solid var(--bad-full);border-radius:var(--radius-lg);box-shadow:0 10px 8px #0000000a, 0 4px 3px #0000001a}
.incident-banner h2{margin:0 0 0.25rem;font-size:1.0625rem}
.incident-banner p{margin:0;color:var(--mute);font-size:0.9375rem}

/* --- summary metrics (six categories) --- */
.summary-metrics{display:flex;gap:0.5rem;flex-wrap:wrap;justify-content:center;max-width:60rem;margin:1.75rem auto 0;padding:0 1.5rem}
.summary-metric{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 0.75rem;font-size:0.875rem;background:var(--modal-bg);border:1px solid var(--line);border-radius:999px}
.summary-metric .summary-title{font-weight:500}
.summary-metric .summary-count{color:var(--mute);font-family:var(--font-mono);font-size:0.8125rem}

/* --- status pills --- */
.status-pill{display:inline-block;padding:0.125rem 0.5rem;font-size:0.6875rem;font-weight:600;line-height:1.25rem;text-transform:capitalize;letter-spacing:0.02em;border-radius:999px;color:#fff;background:var(--mute)}
.status-pill.pill-critical{background:var(--bad-full)}
.status-pill.pill-high{background:var(--bad)}
.status-pill.pill-medium{background:var(--warn)}
.status-pill.pill-low{background:var(--ok)}
.status-pill.pill-info{background:var(--maint)}
.status-pill.pill-unknown{background:var(--surface-2);border:1px solid var(--line);color:var(--mute)}

/* --- tooltip --- */
.tooltip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0.6875rem;font-weight:600;color:#fff;background:var(--mute);border-radius:50%;cursor:help}

/* --- accordion (categories) --- */
.accordion{max-width:60rem;margin:2rem auto 3rem;padding:0 1.5rem;display:flex;flex-direction:column;gap:0.625rem}
.cat{background:var(--modal-bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:0.875rem 1.125rem;box-shadow:0 1px 2px rgba(16,19,26,.04);transition:box-shadow .12s ease, border-color .12s ease}
.cat:hover{box-shadow:0 4px 12px rgba(16,19,26,.07);border-color:#dcdfe3}
.cat summary{cursor:pointer;font-weight:600;display:flex;align-items:center;gap:0.5rem;list-style:none}
.cat summary::-webkit-details-marker{display:none}
.cat summary::before{content:"›";color:var(--mute);font-weight:400;transition:transform .12s ease}
.cat[open] summary::before{transform:rotate(90deg)}
.cat summary .count{margin-left:auto;color:var(--mute);font-weight:400;font-family:var(--font-mono);font-size:0.8125rem}

/* --- findings --- */
.findings{margin-top:0.875rem;display:flex;flex-direction:column;gap:0.625rem}
.finding{border:1px solid var(--line);border-left:3px solid var(--mute);padding:0.75rem 0.875rem;background:var(--surface-2);border-radius:var(--radius-sm)}
.finding.sev-critical,.finding.sev-high{border-left-color:var(--bad)}
.finding.sev-medium{border-left-color:var(--warn)}
.finding.sev-low{border-left-color:var(--ok)}
.finding.sev-info{border-left-color:var(--maint)}
.finding header{display:flex;gap:0.625rem;align-items:baseline;margin-bottom:0.25rem}
.finding header h3{margin:0;font-size:1rem;letter-spacing:-0.01em}
.finding .sev{font-size:0.6875rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--mute);font-weight:600}
.finding p{margin:0.25rem 0;font-size:0.9375rem}

/* --- history timeline --- */
.history{max-width:64rem;margin:2.5rem auto;padding:0 1.5rem}
.history h1{font-size:1.5rem;margin:0 0 0.5rem}
.timeline{display:flex;gap:0.375rem;align-items:flex-end;height:200px;border-bottom:1px solid var(--line);padding-bottom:0.5rem;margin-top:1.5rem}
.timeline .col{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:28px;min-height:100%;border-radius:var(--radius-xs);overflow:hidden}
.timeline .bar{display:block}
.timeline .bar.ok{background:var(--ok)}
.timeline .bar.warn{background:var(--warn)}
.timeline .bar.bad{background:var(--bad)}
.timeline .bar.maint{background:var(--maint)}
.timeline .label{font-size:0.6875rem;color:var(--mute);position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-family:var(--font-mono)}

/* --- generic page main (policy/monitoring) --- */
main{padding-bottom:1rem}
[data-testid^="doc-"],[data-testid="connect-monitoring-page"]{max-width:46rem;margin:3rem auto;padding:0 1.5rem}

/* --- footer --- */
.ftr{margin-top:4rem;padding:2rem 1.5rem;border-top:1px solid var(--line);color:var(--mute);font-size:0.875rem}
.ftr ul{display:flex;gap:1.25rem;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 0.75rem}
.ftr a{color:var(--mute)}
.ftr a:hover{color:var(--ink)}
.disclaimer{margin:0;max-width:46rem}