/* OpsLab Insights pages - shared style (step 14.48, layout rework 14.49).
   Design tokens copied from sample-report-base.html so the pages read as one site.

   Layout idea: a sticky map on the left shows the structure of the article at all
   times, while the article itself sits in a single column of tiles on the right.
   The page still uses the full 1160px, but prose is capped near 74 characters so
   line length stays comfortable. The map is built by insights.js from the tiles. */

html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --nav-h:   62px;
  --bg:      #080C18;
  --bg2:     #0D1226;
  --bg3:     #111A32;
  --border:  #1C2B4A;
  --text:    #D6D6D6;
  --muted:   #888888;
  --accent:  #CF6829;
  --accent2: #E07840;
}

body {
  background: linear-gradient(to left, #0D1630 0%, #0A0F22 55%, #070A14 100%);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* Top bar is sticky so the way out ("Все разборы" / logo) is always one click away,
   no matter how deep the reader has scrolled. */
body > nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: rgba(8, 12, 24, 0.92);
  backdrop-filter: blur(10px);
}
/* Logo must match the main page exactly (draft-map.html): 1.68rem / 800, domain 1rem grey */
.logo { font-size: 1.68rem; font-weight: 800; letter-spacing: -0.4px; color: var(--text); }
.logo a { color: inherit; font-weight: 800; }
.logo a:hover { text-decoration: none; }
.logo .logo-cap { color: var(--accent); font-weight: 800; }
.logo .logo-domain { color: var(--muted); font-weight: 600; font-size: 1rem; }
.nav-cta { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.nav-cta:hover { color: var(--accent2); }

/* Floating back link - fixed so it stays top-left while the page scrolls */
.back-float {
  position: fixed; top: 78px; left: 24px; z-index: 60;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 14px; color: var(--muted); font-size: 0.85rem; font-weight: 600;
}
.back-float:hover { color: var(--accent2); border-color: var(--accent); text-decoration: none; }

main { flex: 1; padding: 26px 0 60px; }

/* ── Sticky page head ─────────────────────────────────────────
   Rubric + h1 ride along at the top of the content column. The h1 stays on the
   page (search engines and screen readers need it) but is set small, so there is
   no large heading block competing with the opening paragraph. */
.page-head {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  padding: 12px 0 10px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(8, 12, 24, 0.92);
  backdrop-filter: blur(10px);
}
.kicker {
  color: var(--accent2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.page-head h1 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.2px;
  margin: 0;
  color: var(--text);
}
.lead { color: var(--text); font-size: 1.06em; max-width: 70ch; margin-bottom: 20px; }

/* ── Two-column layout: sticky map on the left, content on the right ── */
.layout { display: grid; grid-template-columns: 232px 1fr; gap: 34px; align-items: start; }

.sidemap { position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; }

/* One continuous rail: the back link, every section and "to top" share the same
   left edge and the same styling, so the column reads as a single control. */
.rail { display: flex; flex-direction: column; border-left: 1px solid var(--border); }
.rail nav { display: contents; }
.rail a {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 8px 0 8px 14px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.rail a:hover { color: var(--text); text-decoration: none; }
.rail a.active { color: var(--accent2); border-left-color: var(--accent); }
/* Auxiliary links sit slightly back so the section list stays the main content */
.rail-aux { color: #6f7484; }
.rail-aux:hover { color: var(--accent2); }
.rail > .rail-aux:first-child { margin-bottom: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.rail-top { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); }

/* Content column - 10% smaller than the 16px base; children use em to follow it */
.content { font-size: 0.9rem; }

/* Tiles stack in one column, so line length stays comfortable */
.bento { display: flex; flex-direction: column; gap: 16px; }
.tile {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px 24px;
  /* anchored jumps must clear both sticky bars */
  scroll-margin-top: 130px;
}

/* The findings tile carries the numbers - give it the accent treatment */
.tile.key {
  border-color: #3a2a1c;
  background: linear-gradient(155deg, rgba(207,104,41,0.10), var(--bg2) 60%);
}

.tile-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.t-ic { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.t-ic svg { width: 100%; height: 100%; display: block; }
.tile h2 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  line-height: 1.4;
}

/* Cap prose so lines stay readable even in a wide tile */
.tile p { margin-bottom: 12px; max-width: 74ch; }
.tile p:last-child { margin-bottom: 0; }
.muted { color: var(--muted); }
strong { color: var(--text); font-weight: 600; }

/* Result / finding highlight box */
.result {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin: 0 0 14px;
}
.result .big {
  color: var(--accent2);
  font-size: 1.15em;
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
  line-height: 1.35;
}

/* Illustration box (обезличенный пример - method demo, not a real run) */
.demo {
  background: var(--bg3);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 0 0 14px;
  color: var(--text);
}
.demo .tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.demo p { max-width: none; }
code { font-size: 0.9em; color: var(--accent2); }

/* Method list - two columns inside a full-width tile */
ul.methods { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }
ul.methods li {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.93em;
  line-height: 1.6;
}
ul.methods li strong { color: var(--accent2); font-weight: 700; display: block; margin-bottom: 4px; }
/* A lone method would leave half the row empty - let it use the full width */
ul.methods li:only-child { grid-column: 1 / -1; }
.tile ul.methods + p { max-width: 78ch; }

/* Quiet closing line - a plain link back to the main page, no buttons */
.next-line {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.next-line a { font-weight: 600; font-size: 0.98em; }
.note { color: var(--muted); font-size: 0.86em; margin-top: 10px; max-width: 74ch; }

/* Insights hub (index) — card grid */
.ins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin: 28px 0 32px;
}
.ins-grid a {
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 18px 20px;
  color: var(--text);
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.ins-grid a:hover { text-decoration: none; transform: translateY(-3px); border-left-color: var(--accent2); background: var(--bg3); }
.ins-grid .tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.ins-grid .q { font-weight: 700; color: var(--text); font-size: 1.02rem; line-height: 1.35; margin-bottom: 7px; }
.ins-grid a:hover .q { color: var(--accent2); }
.ins-grid .d { color: var(--muted); font-size: 0.86rem; line-height: 1.5; margin-top: auto; }

/* Buttons - still used on the hub page */
.cta-group { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 8px; }
.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 12px 24px;
  border-radius: 7px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: background 0.2s;
}
.btn-primary:hover { background: var(--accent2); text-decoration: none; }
.btn-secondary {
  display: inline-block;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 12px 24px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: border-color 0.2s, color 0.2s;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent2); text-decoration: none; }

footer {
  border-top: 1px solid var(--border);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin-top: 40px;
}
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: var(--muted); font-size: 0.78rem; }
.footer-links a:hover { color: var(--accent2); text-decoration: none; }
footer p { color: var(--muted); font-size: 0.74rem; margin: 0; }

@media (max-width: 900px) {
  /* The rail turns into a horizontal strip above the content */
  .layout { grid-template-columns: 1fr; gap: 16px; }
  .sidemap { position: static; }
  .rail {
    flex-direction: row;
    overflow-x: auto;
    border-left: none;
    border-bottom: 1px solid var(--border);
    gap: 2px;
  }
  .rail a {
    white-space: nowrap;
    padding: 8px 10px;
    margin-left: 0;
    border-left: none;
    border-bottom: 2px solid transparent;
  }
  .rail a.active { border-left-color: transparent; border-bottom-color: var(--accent); }
  .rail > .rail-aux:first-child { margin-bottom: 0; padding-bottom: 8px; border-bottom: 2px solid transparent; }
  .rail-top { margin-top: 0; padding-top: 8px; border-top: none; border-bottom: 2px solid transparent; }
  ul.methods { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  main { padding: 36px 0 44px; }
  h1 { font-size: 1.55rem; }
  body > nav { padding: 0 18px; }
  .container { padding: 0 18px; }
  .tile { padding: 18px 18px 20px; }
}

/* ── Table (used by the "what comes next" article) ─────────────────────
   Wide tables scroll inside their own box, so the page itself never
   scrolls sideways on a phone. */
.tbl-scroll { overflow-x: auto; margin: 4px 0 14px; }
table.itil { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 0.92em; }
table.itil th, table.itil td { text-align: center; vertical-align: middle; padding: 10px 12px; border-bottom: 1px solid var(--border); }
table.itil th { color: var(--accent2); font-size: 0.78em; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; border-bottom-color: var(--accent); }
table.itil tbody tr:hover { background: var(--bg3); }
table.itil td .muted { display: block; font-size: 0.88em; line-height: 1.4; margin-top: 3px; }

/* ── Article pager (prev/next through the "what problems it solves" set) ──
   One line tall: each button is a single row of text, and the two share the
   full row width evenly since there is no third element competing for space. */
.article-pager { display: flex; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.article-pager a {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  padding: 13px 18px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); font-weight: 700; font-size: 0.92rem;
  transition: border-color 0.15s, background 0.15s;
}
.article-pager a:hover { border-color: var(--accent); background: var(--bg3); text-decoration: none; }
.article-pager .prev { justify-content: flex-start; }
.article-pager .next { justify-content: flex-end; }
@media (max-width: 560px) {
  .article-pager { flex-direction: column; }
  .article-pager .prev, .article-pager .next { justify-content: center; }
}