/* ------------------------------------------------------------------ *
 * TONCO docs — custom style overrides.
 *
 * This file is copied into the build by scripts/convert.py and loaded
 * AFTER the mdBook theme, so anything here wins. Edit freely.
 *
 * The active theme is "light" (set in book.toml). mdBook exposes all
 * colours as CSS variables on the theme root, so the easiest way to
 * recolour is to override those variables. A few common ones:
 *
 *   --bg                 page background
 *   --fg                 body text
 *   --sidebar-bg         left navigation background
 *   --sidebar-fg         left navigation text
 *   --links              link colour
 *   --inline-code-color  inline `code`
 *   --content-max-width  text column width
 *
 * Example (uncomment / tweak):
 *
 *   .light {
 *     --links: #009269;          // TONCO teal
 *     --sidebar-bg: #f9fafa;
 *   }
 *
 *   .content { max-width: 900px; }   // wider text column
 * ------------------------------------------------------------------ */

/* Put your overrides below this line. */

/* Language switcher at the top of the sidebar (EN / RU), injected by custom.js. */
.tonco-langs {
  display: flex;
  gap: 0.4rem;
  padding: 0.75rem 1rem 0.5rem;
  margin-bottom: 0.25rem;
}
.tonco-langs .tonco-lang {
  flex: 1;
  text-align: center;
  padding: 0.3rem 0;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  color: var(--sidebar-fg);
  opacity: 0.85;
  border: 1px solid rgba(16, 182, 139, 0.35);
}
.tonco-langs .tonco-lang:hover { color: var(--tonco-teal-dark); opacity: 1; }
.tonco-langs .tonco-lang.active {
  color: #fff;
  background: var(--tonco-teal);
  border-color: var(--tonco-teal);
}

/* ------------------------------------------------------------------ *
 * TONCO brand colours (matched to the reference site docs.tonco.io).
 * Brand is teal-green, not blue: primary #10B68B, darker #009269.
 * ------------------------------------------------------------------ */
:root {
  --tonco-teal:      #10B68B;   /* primary brand accent            */
  --tonco-teal-dark: #009269;   /* hover / stronger accent         */
  --tonco-teal-soft: #4E7968;   /* muted brand text                */
}

.light {
  --links: var(--tonco-teal-dark);      /* body links               */
  --sidebar-active: var(--tonco-teal);  /* active nav item          */
  --sidebar-bg: #f9fafa;                /* reference sidebar bg     */
  /* NB: do NOT override --sidebar-fg globally — it's the sidebar text colour and
     other themes (e.g. rust) have a DARK sidebar needing a light --sidebar-fg.
     We dim the 2nd-level items with opacity instead (see below), which works in
     every theme. */
  --fg: #1c1d1d;                        /* softened near-black text */
  --inline-code-color: #1c1d1d;
  --content-max-width: 850px;           /* wider text column, like the ref */
  /* search result highlight -> brand */
  --searchbar-border-color: var(--tonco-teal);
  --searchresults-header-fg: var(--tonco-teal-soft);
}

/* Second-level items (pages inside a section's <ol class="section">). Dimmed
   sidebar text; brand on hover/active. In other themes use --sidebar-fg + opacity
   so it adapts; in LIGHT pin the exact reference grey (#68706d) instead — opacity
   on light's black --sidebar-fg wouldn't match the reference tint. */
.chapter ol.section li.chapter-item a { color: var(--sidebar-fg); opacity: 0.82; }
.light .chapter ol.section li.chapter-item a { color: #68706d; opacity: 1; }
.chapter ol.section li.chapter-item a:hover { color: var(--tonco-teal-dark); opacity: 1; }
.chapter ol.section li.chapter-item a.active { color: var(--tonco-teal); opacity: 1; font-weight: 600; }

/* Top-level sections are now collapsible draft chapters: their label sits in a
   <div> (direct child of the top-level <li.chapter-item>), with a toggle arrow.
   UPPERCASE + full-strength --sidebar-fg (the theme's SIDEBAR text colour) so it
   contrasts the sidebar bg in EVERY theme: black on light's white sidebar, light
   on rust's dark-brown sidebar. (2nd-level items use the same var, dimmed via
   opacity.) NB: must be --sidebar-fg, NOT --fg — in rust the content --fg is dark
   but the sidebar is dark too, so --fg made these invisible. */
.chapter > li.chapter-item > div,
.chapter > li.chapter-item > a {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.82em;
  font-weight: 700;
  color: var(--sidebar-fg);
}
/* a top-level section that IS a real page (has a link) — keep it clickable-teal
   on hover but still uppercase/dark by default */
.chapter > li.chapter-item > a:hover { color: var(--tonco-teal-dark); }
.chapter > li.chapter-item > a.active { color: var(--tonco-teal); }

/* Header logo — sits inside .menu-title, left of the "TONCO Docs" text and at
   the same height (injected by custom.js). */
#menu-bar .menu-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
#menu-bar .menu-title .tonco-logo {
  height: 1.4em;
  width: 1.4em;
  vertical-align: middle;
}

/* Web App + Socials nav buttons, between the title and the right buttons. */
#menu-bar .tonco-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;          /* push the nav (and right buttons) to the right */
  margin-right: 0.75rem;
}
/* Sizing matched to the reference: Tailwind `p-2 px-4 rounded-xl leading-normal`,
   full-size text (no shrink). => padding 0.5rem/1rem, radius 0.75rem, 1rem font. */
#menu-bar .tonco-nav-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;        /* p-2 px-4: taller + wider */
  font-size: 1rem;             /* page body text size      */
  font-weight: 600;
  line-height: 1.5;            /* leading-normal           */
  border-radius: 0.75rem;      /* rounded-xl               */
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  color: #fff;
  background: var(--tonco-teal);
  transition: background 0.15s, border-color 0.15s;
}
#menu-bar .tonco-nav-btn:hover { background: var(--tonco-teal-dark); }
/* second button (Socials) as an outline variant for hierarchy */
#menu-bar .tonco-nav-btn:last-child {
  color: var(--tonco-teal-dark);
  background: transparent;
  border-color: var(--tonco-teal);
}
#menu-bar .tonco-nav-btn:last-child:hover {
  background: rgba(16, 182, 139, 0.08);
}

/* ------------------------------------------------------------------ *
 * Content links — matched to the reference: muted brand colour with a thin
 * underline (offset), brighter + thicker underline on hover. External links
 * get an ↗ icon and open in a new tab (see custom.js markExternalLinks).
 * ------------------------------------------------------------------ */
.content a {
  color: var(--tonco-teal-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(16, 182, 139, 0.4);   /* faint brand */
  transition: color 0.1s, text-decoration-color 0.1s,
              text-decoration-thickness 0.1s;
}
.content a:hover,
.content a:focus {
  color: var(--tonco-teal);
  text-decoration-color: var(--tonco-teal);
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
}
/* don't underline links that are just wrapping an image/figure */
.content a:has(> img),
.content a:has(> figure) { text-decoration: none; }

/* external-link ↗ icon (appended by custom.js) */
.content a.external-link .external-icon {
  font-size: 0.72em;
  margin-left: 0.25em;
  vertical-align: baseline;
  text-decoration: none;
  opacity: 0.7;
}
.content a.external-link:hover .external-icon { opacity: 1; }

/* ------------------------------------------------------------------ *
 * Text highlights. GitBook exports <mark style="background-color:yellow"> with
 * raw CSS colour names (yellow=#FF0, orange, red, green, purple) — harsh/acid.
 * The reference uses soft pastel tints (e.g. GitBook's yellow-100 = #fdf9e8).
 * Override the inline styles (need !important) with a consistent pastel set at
 * the same lightness, plus a slightly darker text for contrast.
 * ------------------------------------------------------------------ */
.content mark { border-radius: 3px; padding: 0.05em 0.15em; color: #1c1d1d; }
.content mark[style*="yellow"] { background-color: #fdf9e8 !important; }
.content mark[style*="orange"] { background-color: #fdf0e6 !important; }
.content mark[style*="red"]    { background-color: #fdecec !important; }
.content mark[style*="green"]  { background-color: #eafaf0 !important; }
.content mark[style*="purple"] { background-color: #f3eefd !important; }

/* ------------------------------------------------------------------ *
 * Spoilers / expandable sections (<details><summary>…). Reference-style:
 * boxed frame, the WHOLE summary row is clickable (native <details> already
 * toggles on any summary click), pointer cursor, custom ▸/▾ marker.
 * ------------------------------------------------------------------ */
.content details {
  border: 1px solid rgba(16, 182, 139, 0.28);
  border-radius: 10px;
  margin: 1rem 0;
  background: var(--bg);            /* theme bg (was #fff → white box on dark) */
  overflow: hidden;
}
.content details > summary {
  cursor: pointer;
  list-style: none;                 /* remove default triangle (we add our own) */
  padding: 0.9rem 1.1rem;
  font-weight: 600;
  color: var(--fg);                 /* theme text (was #1c1d1d) */
  display: flex;
  align-items: center;
  gap: 0.6rem;
  user-select: none;
}
.content details > summary::-webkit-details-marker { display: none; }
/* custom marker, rotates when open */
.content details > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid var(--tonco-teal);
  border-bottom: 2px solid var(--tonco-teal);
  transform: rotate(-45deg);        /* ▸ pointing right */
  transition: transform 0.15s;
}
.content details[open] > summary::before { transform: rotate(45deg); } /* ▾ down */
.content details > summary:hover { color: var(--tonco-teal-dark); }
/* the body */
.content details > summary ~ * {
  margin-left: 1.1rem;
  margin-right: 1.1rem;
}
.content details > *:last-child { margin-bottom: 1rem; }
.content details[open] > summary {
  border-bottom: 1px solid rgba(16, 182, 139, 0.18);
  margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------------ *
 * Right-hand "On this page" column (built by custom.js buildPageToc).
 * Fixed to the right edge; hidden below 1200px so it never crowds the text.
 * ------------------------------------------------------------------ */
/* Two-column layout when a page-toc exists: [content column][toc column], laid
   out with CSS grid inside .content. This keeps the content column its normal
   width and puts the toc to its RIGHT with a real gap — no margin hacks, no
   fixed positioning, no left-side void. <main> and .nav-wrapper (prev/next) sit
   in column 1; .page-toc in column 2. The whole grid is centered as a unit. */
/* Standard 3-column docs layout (sidebar is mdBook's; here we add content + toc).
   Grid lives on .page (which has NO overflow), toc is a SIBLING of #content, so
   the sticky toc's scroll root is .page-wrapper — #content's own overflow can't
   trap it. align-items:start is REQUIRED or the toc cell stretches to full height
   and sticky never engages. (Best-practice recipe: grid + align-items:start +
   sticky, no overflow ancestor between the sticky element and its scroll root.) */
.page.has-page-toc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;   /* px: fixed toc width */
  column-gap: 3rem;
  align-items: start;
}
/* .page also contains a sticky #menu-bar (+ hover placeholder). Put those on
   row 1 spanning both columns; content + toc share row 2. Explicit rows avoid
   grid auto-placement shoving the toc onto its own row or into the menu bar. */
.page.has-page-toc {
  grid-template-rows: auto 1fr;
}
.page.has-page-toc > #menu-bar,
.page.has-page-toc > #menu-bar-hover-placeholder {
  grid-column: 1 / -1;
  grid-row: 1;
}
.page.has-page-toc > #content { grid-column: 1; grid-row: 2; min-width: 0; }
.page.has-page-toc > .page-toc { grid-column: 2; grid-row: 2; }

.page-toc {
  position: sticky;
  top: calc(var(--menu-bar-height, 50px) + 1.5rem);
  max-height: calc(100vh - var(--menu-bar-height, 50px) - 3rem);
  overflow-y: auto;
  padding: 0.5rem 0 1rem;
  /* NB: mdBook sets html font-size:62.5% (1rem=10px) and body 1.6rem(=16px).
     So toc items 1.4rem = 14px — just under body text, readable (was 0.95rem=9.5px). */
  font-size: 1.4rem;
}
.page-toc-title {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.15rem;           /* ~11.5px uppercase label */
  font-weight: 700;
  color: var(--fg);
  opacity: 0.55;                /* muted label, theme-adaptive */
  margin-bottom: 0.75rem;
}
.page-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid rgba(16,182,139,.18); }
.page-toc li { margin: 0; }
.page-toc li a {
  display: block;
  padding: 0.3rem 0 0.3rem 1rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--fg);
  opacity: 0.7;                 /* dimmed, theme-adaptive */
  text-decoration: none;
  line-height: 1.4;
}
.page-toc-h3 a { padding-left: 1.75rem; }
.page-toc li a:hover { color: var(--tonco-teal-dark); opacity: 1; }
.page-toc li a.active {
  color: var(--tonco-teal-dark);
  opacity: 1;
  border-left-color: var(--tonco-teal);
  font-weight: 600;
}
/* Not enough room for the toc column -> drop it, content spans full width. */
@media (max-width: 1439px) {
  .page.has-page-toc { display: block; }
  .page-toc { display: none; }
}

/* ------------------------------------------------------------------ *
 * Prev/next navigation.
 * Hide mdBook's big floating side arrows; keep the bottom nav and turn it into
 * two labelled cards ("Previous / <title>", "Next / <title>") — see custom.js
 * buildPrevNext(). Reference-style.
 * ------------------------------------------------------------------ */
.nav-wide-wrapper { display: none !important; }   /* no floating side arrows */

.nav-wrapper {
  /* grid of 2 equal columns: cards fill exactly, reaching both content edges
     (flex left a rounding gap on the right). Aligned to the centered text
     column via same max-width + auto margins. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: var(--content-max-width, 750px);
  margin: 3rem auto 1rem;
  /* mdBook may hide this on wide screens; force it visible as our main nav */
  visibility: visible !important;
}
.mobile-nav-chapters.tonco-prevnext {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid rgba(16, 182, 139, 0.25);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
  /* reset mdBook's fixed/absolute positioning for these arrows */
  position: static;
  width: auto;
  height: auto;
}
.mobile-nav-chapters.tonco-prevnext.next { text-align: right; align-items: flex-end; }
.mobile-nav-chapters.tonco-prevnext:hover {
  border-color: var(--tonco-teal);
  background: rgba(16, 182, 139, 0.04);
}
.tonco-prevnext .pn-dir {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg);
  opacity: 0.55;
}
.tonco-prevnext .pn-title {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--tonco-teal-dark);
  line-height: 1.3;
}
.tonco-prevnext:hover .pn-title { color: var(--tonco-teal); }

/* ------------------------------------------------------------------ *
 * Remove the automatic chapter numbering in the sidebar.
 * mdBook renders it as <strong aria-hidden="true">1.2.</strong> inside
 * each nav link; hide it (kept in DOM for a11y ordering but not shown).
 * ------------------------------------------------------------------ */
.chapter li.chapter-item strong[aria-hidden="true"] {
  display: none;
}

/* ------------------------------------------------------------------ *
 * Sidebar icons (injected by custom.js from frontmatter `icon:`).
 *   .toc-fa-icon   — a real Font Awesome Free icon before the item text.
 *   .toc-icon-todo — red "❗name" flag for FA Pro icons (not self-hostable);
 *                    editor replaces the frontmatter icon with a Free FA
 *                    analog (add it to FA_FREE_ICONS in convert.py) or emoji.
 * ------------------------------------------------------------------ */
.toc-fa-icon {
  width: 1.1em;
  margin-right: 0.45em;
  text-align: center;
  opacity: 0.85;
}
.toc-icon-todo {
  color: #e5484d;          /* red */
  font-weight: 600;
  font-size: 0.8em;
}