/* ГОНЕЦ — документационный портал. Швейцарская сетка. Рудер + Рэнд. */

:root{
  --fg:#1a1a1a;
  --fg-2:#4a4a4a;
  --fg-3:#9a9a9a;
  --bg:#ffffff;
  --bg-soft:#f8f8f8;
  --bg-block:#f4f4f4;
  --rule:#e8e8e8;
  --accent:#1a3a6e;
  --accent-bg:#f0f4fb;
  --font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  color:var(--fg);
  background:var(--bg);
  font-feature-settings:'kern','liga','calt';
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s;}
a:hover{border-bottom-color:var(--accent);}

::selection{background:var(--accent);color:#fff;}

/* ====================== LOGIN ====================== */
.login-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg-soft);
  padding:40px 20px;
}
.login-card{
  width:100%;
  max-width:400px;
  background:var(--bg);
  border:1px solid var(--rule);
  padding:48px 40px;
}
.login-brand{
  font-weight:700;
  font-size:22px;
  letter-spacing:-0.01em;
  color:var(--accent);
  margin:0 0 4px;
}
.login-sub{
  font-size:13px;
  color:var(--fg-2);
  margin:0 0 40px;
}
.login-field{margin-bottom:16px;}
.login-field label{
  display:block;
  font-size:13px;
  color:var(--fg-2);
  margin-bottom:6px;
  font-weight:500;
}
.login-field input{
  width:100%;
  font:400 15px/1.4 var(--font);
  color:var(--fg);
  background:var(--bg);
  border:1px solid var(--rule);
  padding:10px 12px;
  outline:none;
  transition:border-color .2s;
}
.login-field input:focus{border-color:var(--accent);}
.login-btn{
  width:100%;
  margin-top:16px;
  font:500 15px/1 var(--font);
  color:#fff;
  background:var(--accent);
  border:none;
  padding:14px;
  cursor:pointer;
  transition:opacity .2s;
}
.login-btn:hover{opacity:0.9;}
.login-err{
  color:#b00020;
  font-size:13px;
  margin-top:16px;
  min-height:18px;
}

/* ====================== SHELL ====================== */
.portal-shell{
  display:grid;
  grid-template-rows:56px 1fr;
  min-height:100vh;
}

.topbar{
  border-bottom:1px solid var(--rule);
  background:var(--bg);
  display:flex;
  align-items:center;
  padding:0 40px;
  gap:32px;
  position:sticky;
  top:0;
  z-index:50;
}
.topbar-brand{
  font-weight:700;
  font-size:16px;
  letter-spacing:-0.01em;
  color:var(--accent);
  cursor:pointer;
  border:none;
  background:none;
  padding:0;
  font-family:var(--font);
}
.topbar-nav{
  display:flex;
  gap:28px;
  margin-left:8px;
}
.topbar-nav a{
  font-size:14px;
  color:var(--fg-2);
  font-weight:500;
  border:none;
  padding:4px 0;
}
.topbar-nav a:hover,.topbar-nav a.active{
  color:var(--accent);
}
.topbar-spacer{flex:1;}
.topbar-logout{
  font-size:13px;
  color:var(--fg-3);
  background:none;
  border:none;
  cursor:pointer;
  font-family:var(--font);
  padding:4px 0;
}
.topbar-logout:hover{color:var(--fg);}

.topbar-burger{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  font-size:20px;
  color:var(--fg);
  padding:0;
  font-family:var(--font);
  line-height:1;
}

.main-grid{
  display:grid;
  grid-template-columns:280px 1fr 220px;
  gap:40px;
  padding:40px;
  align-items:start;
  max-width:1600px;
  margin:0 auto;
  width:100%;
  position:relative;
  transition:grid-template-columns .25s ease;
}
.main-grid.sidebar-collapsed{
  grid-template-columns:0 1fr 220px;
  gap:0 40px;
}
.main-grid.sidebar-collapsed .sidebar{
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  width:0;
  padding:0;
}

.sidebar-edge-toggle{
  position:absolute;
  top:96px;
  left:calc(40px + 280px);  /* sits right at the edge of the sidebar */
  width:20px;
  height:56px;
  background:var(--bg);
  border:1px solid var(--rule);
  border-left:none;
  color:var(--fg-2);
  cursor:pointer;
  font-size:10px;
  font-family:var(--font);
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  transition:left .25s ease, color .2s, border-color .2s, background .2s;
}
.sidebar-edge-toggle:hover{color:var(--accent);border-color:var(--accent);background:var(--bg-alt, #fafafa);}
.main-grid.sidebar-collapsed .sidebar-edge-toggle{left:40px;}

/* ====================== SIDEBAR ====================== */
.sidebar{
  position:sticky;
  top:96px;
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  padding-right:8px;
}
.sidebar-section{margin-bottom:32px;}
.sidebar-h{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--fg-3);
  font-weight:500;
  margin:0 0 12px;
}
.sidebar-list{list-style:none;margin:0;padding:0;}
.sidebar-list li{margin-bottom:8px;}
.sidebar-list a{
  display:block;
  font-size:14px;
  line-height:1.4;
  color:var(--fg);
  font-weight:400;
  padding:6px 10px 6px 12px;
  border-left:2px solid transparent;
  border-bottom:none;
}
.sidebar-list.core a{
  font-weight:500;
  background:var(--bg-soft);
}
.sidebar-list a:hover{
  border-left-color:var(--accent);
  color:var(--accent);
}
.sidebar-list a.active{
  border-left-color:var(--accent);
  color:var(--accent);
  font-weight:500;
  background:var(--accent-bg);
}
.sidebar-num{
  display:inline-block;
  width:22px;
  color:var(--fg-3);
  font-family:var(--mono);
  font-size:12px;
}
.sidebar-list a.active .sidebar-num,
.sidebar-list a:hover .sidebar-num{color:var(--accent);}

/* ====================== CONTENT ====================== */
.content{
  max-width:none;
  min-width:0;
}
.content-inner{
  max-width:65ch;
}
/* Wide elements (diagrams, big tables, code) break out of the 65ch reading column */
.content-inner .mermaid-wrap,
.content-inner table{
  max-width:none;
  width:max(100%, 65ch);
}
.content-inner pre{
  max-width:none;
  width:100%;
}
.crumbs{
  font-size:13px;
  color:var(--fg-3);
  margin-bottom:24px;
}
.crumbs a{color:var(--fg-2);border:none;}
.crumbs a:hover{color:var(--accent);}
.crumbs span{margin:0 8px;color:var(--fg-3);}

.doc h1{
  font-weight:700;
  font-size:32px;
  line-height:1.25;
  color:var(--accent);
  margin:0 0 24px;
  letter-spacing:-0.015em;
  display:flex;
  align-items:baseline;
  gap:24px;
  flex-wrap:wrap;
}
.doc h1 .present-trigger{
  font-size:13px;
  font-weight:500;
  color:var(--accent);
  cursor:pointer;
  background:none;
  border:none;
  padding:4px 0;
  border-bottom:1px solid var(--accent);
  font-family:var(--font);
  letter-spacing:0;
}
.doc h1 .present-trigger:hover{opacity:0.7;}

.doc h2{
  font-weight:600;
  font-size:22px;
  line-height:1.25;
  color:var(--fg);
  margin:56px 0 16px;
  letter-spacing:-0.005em;
  scroll-margin-top:96px;
}
.doc h2:first-of-type{margin-top:40px;}
.doc h3{
  font-weight:500;
  font-size:17px;
  line-height:1.3;
  color:var(--fg);
  margin:32px 0 12px;
}
.doc h4{
  font-weight:500;
  font-size:15px;
  color:var(--fg);
  margin:24px 0 8px;
}
.doc p{margin:0 0 16px;}
.doc ul,.doc ol{margin:0 0 16px;padding-left:24px;}
.doc li{margin-bottom:8px;line-height:1.5;}
.doc li > ul,.doc li > ol{margin-top:8px;margin-bottom:0;}
.doc strong{font-weight:600;}
.doc em{font-style:italic;}

.doc hr{
  border:none;
  border-top:1px solid var(--rule);
  margin:40px 0;
}

.doc blockquote{
  margin:16px 0;
  padding:16px 24px;
  border-left:3px solid var(--accent);
  background:var(--bg-soft);
  color:var(--fg);
}
.doc blockquote p:last-child{margin-bottom:0;}

.doc code{
  font-family:var(--mono);
  font-size:13px;
  background:var(--bg-block);
  border:1px solid var(--rule);
  padding:1px 5px;
  white-space:nowrap;
}
.doc pre{
  font-family:var(--mono);
  font-size:14px;
  line-height:1.5;
  background:var(--bg-block);
  border:1px solid var(--rule);
  padding:16px 20px;
  overflow-x:auto;
  margin:16px 0;
  white-space:pre;
}
.doc pre code{
  background:none;
  border:none;
  padding:0;
  font-size:inherit;
  white-space:pre;
}

.doc table{
  border-collapse:collapse;
  margin:16px 0;
  font-size:14px;
  line-height:1.4;
  display:block;
  overflow-x:auto;
  max-width:100%;
}
.doc table thead th{
  font-weight:500;
  color:var(--fg-2);
  text-align:left;
  padding:10px 14px;
  border-bottom:1px solid var(--fg-2);
  background:var(--bg);
}
.doc table tbody td{
  padding:10px 14px;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.doc table tbody tr:nth-child(odd) td{background:#f9f9f9;}

.doc .mermaid-wrap{
  margin:24px 0;
  padding:16px;  background:var(--bg-soft);
  border:1px solid var(--rule);
  overflow-x:auto;
  position:relative;
  cursor:zoom-in;
  transition:border-color .2s;
}
.doc .mermaid-wrap:hover{border-color:var(--accent);}
.doc .mermaid-wrap::after{
  content:'увеличить ⤢';
  position:absolute;
  top:8px;
  right:12px;
  font-size:11px;
  color:var(--fg-3);
  font-family:var(--mono);
  letter-spacing:0.04em;
  text-transform:uppercase;
  opacity:0;
  transition:opacity .2s;
  pointer-events:none;
}
.doc .mermaid-wrap:hover::after{opacity:1;}
.doc .mermaid-wrap svg{max-width:100%;height:auto;display:block;margin:0 auto;}
.doc .mermaid-err{
  font-family:var(--mono);
  font-size:12px;
  color:#b00020;
  padding:12px;
  background:#fff0f0;
  border:1px solid #ffdada;
}
.doc .mermaid-err pre{background:none;border:none;padding:8px 0 0;color:var(--fg);}

.doc details{
  margin:16px 0;
  border:1px solid var(--rule);
  padding:12px 20px;
  background:var(--bg-soft);
}
.doc details summary{
  font-weight:500;
  cursor:pointer;
  color:var(--fg-2);
  font-size:14px;
}
.doc details[open] summary{margin-bottom:12px;}

.doc .metadata-block{
  font-size:13px;
  color:var(--fg-2);
  margin-bottom:24px;
  padding:12px 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);
}
.doc .metadata-block span{margin-right:16px;}

.feedback-card{
  margin:56px 0 24px;
  padding:24px 28px;
  background:var(--accent-bg);
  border-left:4px solid var(--accent);
}
.feedback-card h3{
  margin:0 0 12px;
  font-size:15px;
  font-weight:600;
  color:var(--fg);
}
.feedback-card p{
  margin:0 0 12px;
  font-size:14px;
  color:var(--fg);
}
.feedback-card .feedback-btn{
  display:inline-block;
  font-size:14px;
  font-weight:500;
  color:#fff;
  background:var(--accent);
  padding:10px 20px;
  margin-right:12px;
  border-bottom:none;
  transition:opacity .2s;
}
.feedback-card .feedback-btn:hover{opacity:0.85;}
.feedback-card .feedback-btn.secondary{
  background:none;
  color:var(--accent);
  border:1px solid var(--accent);
  padding:9px 19px;
}
.feedback-card .feedback-hint{
  font-size:13px;
  color:var(--fg-2);
  margin-top:12px;
}

/* ====================== TOC (right) ====================== */
.toc{
  position:sticky;
  top:96px;
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  padding-left:8px;
  border-left:1px solid var(--rule);
  font-size:13px;
  min-width:0;
}
.toc-h{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--fg-3);
  font-weight:500;
  margin:0 0 12px;
  padding-left:12px;
}
.toc ul{list-style:none;margin:0;padding:0;}
.toc li{margin-bottom:6px;}
.toc a{
  display:block;
  color:var(--fg-2);
  line-height:1.35;
  padding:4px 12px;
  border:none;
  border-left:2px solid transparent;
}
.toc a:hover{color:var(--accent);}
.toc a.active{color:var(--accent);border-left-color:var(--accent);}

/* ====================== HOME ====================== */
.home-hero{
  max-width:72ch;
  margin-bottom:56px;
}
.home-hero h1{
  font-weight:700;
  font-size:36px;
  line-height:1.15;
  color:var(--accent);
  letter-spacing:-0.02em;
  margin:0 0 32px;
}
.home-hero .lead{
  font-size:17px;
  line-height:1.55;
  color:var(--fg);
  margin-bottom:20px;
}
.home-hero .lead strong{font-weight:600;}

.home-group{margin-bottom:56px;}
.home-group-h{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-bottom:24px;
  padding-bottom:12px;
  border-bottom:1px solid var(--rule);
}
.home-group-h h2{
  margin:0;
  font-size:18px;
  font-weight:600;
  color:var(--fg);
}
.home-group-h .home-group-meta{
  font-size:13px;
  color:var(--fg-3);
  font-family:var(--mono);
}

.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:16px;
}
.card{
  display:block;
  padding:20px 22px;
  background:var(--bg);
  border:1px solid var(--rule);
  transition:border-color .2s, transform .2s;
  text-decoration:none;
  color:var(--fg);
  border-bottom:1px solid var(--rule);
}
.card:hover{
  border-color:var(--accent);
  color:var(--fg);
}
.card.core{background:var(--bg-soft);}
.card-num{
  font-family:var(--mono);
  font-size:12px;
  color:var(--fg-3);
  margin-bottom:6px;
}
.card-title{
  font-weight:500;
  font-size:16px;
  line-height:1.35;
  margin-bottom:8px;
}
.card.core .card-title{font-weight:600;}
.card-desc{
  font-size:13px;
  color:var(--fg-2);
  line-height:1.45;
}
.card-present-badge{
  display:inline-block;
  margin-top:12px;
  font-size:11px;
  color:var(--accent);
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:0.08em;
}

/* ====================== PRESENT MODE ====================== */
.present-mode{
  position:fixed;
  inset:0;
  background:#fff;
  z-index:1000;
  overflow:auto;
  display:flex;
  flex-direction:column;
}
.present-stage{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 10%;
  min-height:100vh;
}
.present-slide{
  width:100%;
  max-width:1100px;
}
.present-slide h1,
.present-slide h2{
  font-weight:700;
  font-size:40px;
  line-height:1.2;
  color:var(--accent);
  margin:0 0 32px;
  letter-spacing:-0.015em;
}
.present-slide h3{
  font-weight:600;
  font-size:26px;
  line-height:1.3;
  color:var(--fg);
  margin:32px 0 16px;
}
.present-slide h4{
  font-weight:500;
  font-size:20px;
  color:var(--fg);
  margin:24px 0 12px;
}
.present-slide p,
.present-slide li{
  font-size:22px;
  line-height:1.5;
  color:var(--fg);
  margin-bottom:16px;
}
.present-slide ul,
.present-slide ol{padding-left:28px;margin-bottom:20px;}
.present-slide table{font-size:18px;}
.present-slide table thead th{padding:12px 16px;}
.present-slide table tbody td{padding:12px 16px;}
.present-slide blockquote{
  font-size:22px;
  padding:20px 28px;
}
.present-slide .mermaid-wrap{
  padding:24px;
  background:var(--bg-soft);
}
.present-slide .mermaid-wrap svg{min-height:400px;}
.present-slide pre{font-size:16px;}

.present-chrome{
  position:fixed;
  top:24px;
  right:24px;
  display:flex;
  align-items:center;
  gap:16px;
  z-index:10;
}
.present-close{
  background:none;
  border:1px solid var(--rule);
  color:var(--fg-2);
  padding:6px 14px;
  font:500 13px/1 var(--font);
  cursor:pointer;
  transition:border-color .2s, color .2s;
}
.present-close:hover{border-color:var(--accent);color:var(--accent);}
.present-counter{
  position:fixed;
  bottom:24px;
  right:32px;
  font-family:var(--mono);
  font-size:13px;
  color:var(--fg-3);
  z-index:10;
}
.present-nav{
  position:fixed;
  bottom:24px;
  left:32px;
  display:flex;
  gap:12px;
  z-index:10;
}
.present-nav button{
  background:var(--bg);
  border:1px solid var(--rule);
  color:var(--fg-2);
  padding:6px 14px;
  font:500 13px/1 var(--font);
  cursor:pointer;
  transition:border-color .2s, color .2s;
}
.present-nav button:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.present-nav button:disabled{opacity:0.4;cursor:not-allowed;}

/* ====================== RESPONSIVE ====================== */
@media (max-width:1200px){
  .main-grid{
    grid-template-columns:240px 1fr;
    gap:32px;
    padding:32px;
  }
  .toc{display:none;}
}
@media (max-width:768px){
  .topbar{padding:0 20px;gap:16px;}
  .topbar-burger{display:inline-block;}
  .topbar-nav{display:none;}
  .main-grid{
    grid-template-columns:1fr;
    padding:20px;
    gap:0;
  }
  .sidebar{
    position:fixed;
    top:56px;
    left:0;
    right:0;
    bottom:0;
    background:var(--bg);
    z-index:40;
    padding:24px 20px;
    max-height:none;
    transform:translateX(-100%);
    transition:transform .2s;
    border-right:1px solid var(--rule);
    overflow-y:auto;
  }
  .sidebar.open{transform:translateX(0);}
  .doc h1{font-size:26px;}
  .doc h2{font-size:20px;}
  .home-hero h1{font-size:28px;}
  .doc h1 .present-trigger{display:none;}
  .card-present-badge{display:none;}
}

/* ====================== LIGHTBOX ====================== */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(255,255,255,0.98);
  z-index:900;
  display:none;
}
.lightbox.open{display:block;}
.lightbox-toolbar{
  position:absolute;
  top:16px;
  right:16px;
  display:flex;
  gap:6px;
  align-items:center;
  z-index:2;
  background:var(--bg);
  border:1px solid var(--rule);
  padding:6px 8px;
}
.lb-btn{
  width:32px;
  height:32px;
  border:1px solid var(--rule);
  background:var(--bg);
  color:var(--fg-2);
  font-size:16px;
  font-family:var(--font);
  cursor:pointer;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:border-color .2s, color .2s;
}
.lb-btn:hover{border-color:var(--accent);color:var(--accent);}
.lb-close{margin-left:8px;}
.lb-zoom-level{
  min-width:52px;
  text-align:center;
  font-size:12px;
  color:var(--fg-2);
  font-family:var(--font-mono);
}
.lightbox-viewport{
  position:absolute;
  inset:0;
  overflow:hidden;
  cursor:grab;
  user-select:none;
}
.lightbox-viewport:active{cursor:grabbing;}
.lightbox-canvas{
  position:absolute;
  top:50%;
  left:50%;
  transform-origin:center center;
  /* transform set by JS: translate(-50% + panX, -50% + panY) scale(s) */
  width:min(90vw, 1600px);
  height:min(85vh, 1000px);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
  will-change:transform;
}
.lightbox-canvas svg{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  display:block;
  pointer-events:none;
}
.lightbox-hint{
  position:absolute;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;
  color:var(--fg-2);
  background:var(--bg);
  border:1px solid var(--rule);
  padding:6px 12px;
  font-family:var(--font);
}

/* Mermaid zoom button (inside .mermaid-wrap) */
.mermaid-wrap{position:relative;}
.mermaid-zoom-btn{
  position:absolute;
  top:8px;
  right:8px;
  background:var(--bg);
  border:1px solid var(--rule);
  color:var(--fg-2);
  font-size:11px;
  font-family:var(--font);
  padding:4px 10px;
  cursor:pointer;
  opacity:0;
  transition:opacity .15s, border-color .2s, color .2s;
  z-index:2;
}
.mermaid-wrap:hover .mermaid-zoom-btn{opacity:1;}
.mermaid-zoom-btn:hover{border-color:var(--accent);color:var(--accent);}

/* Print / PDF */
@media print{
  .topbar,.sidebar,.toc,.feedback-card,.present-trigger{display:none !important;}
  .main-grid{grid-template-columns:1fr;padding:0;}
  body{background:#fff;}
  .content-inner{max-width:none;}
}