/* ===================================================================
   Remilink · CEO-assistant handbook
   Light-first editorial theme (GitBook-grade), dark brand toggle.
   Signature: the bracket [ ] mark in a black header over warm paper.
   =================================================================== */

:root {
  --rl-font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --rl-blue: #1E3A8A;   /* Remilink blue — header, footer, accent */
}

/* ---- Light (default): warm paper, ink text, deep-navy accent ---- */
[data-md-color-scheme="default"] {
  --rl-paper:      #FBFAF9;
  --rl-surface:    #FFFFFF;
  --rl-ink:        #1A1A1E;
  --rl-muted:      #6A6A73;
  --rl-hairline:   #EBE8E3;
  --rl-hairline-2: #DED9D1;
  --rl-accent:     #1E3A8A;
  --rl-accent-2:   #16306F;
  --rl-code-bg:    #F5F3EF;

  --md-default-bg-color:        var(--rl-paper);
  --md-default-fg-color:        #26262B;
  --md-default-fg-color--light: #6A6A73;
  --md-default-fg-color--lighter:#9A9AA2;
  --md-typeset-color:           #2A2A30;
  --md-typeset-a-color:         var(--rl-accent);
  --md-accent-fg-color:         var(--rl-accent-2);
  --md-code-bg-color:           var(--rl-code-bg);
  --md-code-fg-color:           #34343B;
  --md-primary-fg-color:        #FBFAF9;   /* light header, blends with page */
  --md-primary-bg-color:        #1A1A1E;   /* header text/icons: ink */
}

/* ---- Dark (slate): Remilink night ---- */
[data-md-color-scheme="slate"] {
  --md-hue: 240;
  --rl-paper:      #0B0B0D;
  --rl-surface:    #141417;
  --rl-ink:        #EDEDEF;
  --rl-muted:      #9A9AA2;
  --rl-hairline:   #26262B;
  --rl-hairline-2: #33333A;
  --rl-accent:     #A9B8FF;
  --rl-accent-2:   #C7D2FF;
  --rl-code-bg:    #141417;

  --md-default-bg-color:        var(--rl-paper);
  --md-default-fg-color:        #E4E4E7;
  --md-default-fg-color--light: #9A9AA2;
  --md-default-fg-color--lighter:#52525B;
  --md-typeset-color:           #D4D4D8;
  --md-typeset-a-color:         var(--rl-accent);
  --md-accent-fg-color:         var(--rl-accent-2);
  --md-code-bg-color:           var(--rl-code-bg);
  --md-code-fg-color:           #E4E4E7;
  --md-primary-fg-color:        #0B0B0D;
  --md-primary-bg-color:        #FAFAFA;
  --md-footer-bg-color:         #0B0B0D;
  --md-footer-bg-color--dark:   #070708;
}

/* Header: clean, seamless with the page, hairline border (GitBook) */
.md-header {
  background: var(--md-primary-fg-color) !important;
  color: var(--md-primary-bg-color);
  box-shadow: none;
  border-bottom: 1px solid var(--rl-hairline);
}
/* Footer: Remilink blue, both schemes */
.md-footer { background: var(--rl-blue) !important; }

/* Sticky footer: keep it pinned to the viewport bottom on short pages,
   so its position does not jump when navigating between scenario pages. */
body { display: flex; flex-direction: column; min-height: 100vh; }
.md-container { flex-grow: 1; }

/* Search field: quiet inset that suits a light header */
.md-search__form {
  background: var(--rl-code-bg);
  border: 1px solid var(--rl-hairline);
  border-radius: 8px;
  box-shadow: none;
}
.md-search__form:hover { background: var(--rl-code-bg); border-color: var(--rl-hairline-2); }
.md-search__input { color: var(--rl-ink); }
.md-search__input::placeholder { color: var(--rl-muted); }
.md-search__icon { color: var(--rl-muted); }
.md-header__title { font-family: var(--rl-font-display); font-weight: 600; }
.md-header__button.md-logo img,
.md-header__button.md-logo svg { height: 1.5rem; width: auto; }

/* ---- Typography ---- */
.md-typeset { font-size: .76rem; line-height: 1.7; }
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 {
  font-family: var(--rl-font-display);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--rl-ink);
}
.md-typeset h1 {
  font-size: 1.68rem; font-weight: 700; letter-spacing: -.025em;
  margin: .2rem 0 1rem; line-height: 1.18;
}
.md-typeset h2 {
  font-size: 1.18rem; margin-top: 2.2rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--rl-hairline);
}
.md-typeset h3 { font-size: 1rem; margin-top: 1.5rem; }
.md-typeset p, .md-typeset li { color: var(--md-typeset-color); }

/* Links: colored, underline only on hover (GitBook style) */
.md-typeset a { text-decoration: none; }
.md-typeset a:hover { text-decoration: underline; text-underline-offset: .18em; }

/* ---- Sidebar nav: quiet, grouped, GitBook-like ---- */
.md-nav { font-size: .74rem; }
.md-nav__title { color: var(--rl-muted); }
.md-sidebar--primary .md-nav__item--section > .md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link {
  color: var(--rl-muted);
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .3rem;
  padding-left: .6rem;
}
.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover { color: var(--rl-accent); }
.md-nav__link--active { font-weight: 600; }

/* ---- Connector chips (inline code) ---- */
.md-typeset code {
  background: var(--md-code-bg-color);
  border: 1px solid var(--rl-hairline);
  border-radius: 7px;
  padding: .08em .45em;
  font-size: .82em;
}

/* ---- Prompt block: calm light panel, not a terminal ---- */
.md-typeset .highlight {
  background: var(--md-code-bg-color);
  border: 1px solid var(--rl-hairline);
  border-radius: 12px;
  overflow: hidden;
}
.md-typeset .highlight pre,
.md-typeset .highlight code { background: transparent; }
.md-typeset pre > code {
  padding: .9rem 1.05rem; font-size: .72rem; line-height: 1.6;
  white-space: pre-wrap;      /* prompts wrap instead of scrolling — читабельніше */
  overflow-wrap: anywhere;
}
.md-typeset .md-clipboard { color: var(--rl-muted); }
.md-typeset .md-clipboard:hover { color: var(--rl-accent); }

/* ---- Collapsible scenario cards: clean expandable panels ---- */
.md-typeset details {
  border: 1px solid var(--rl-hairline);
  border-radius: 14px;
  background: var(--rl-surface);
  box-shadow: 0 1px 2px rgba(16,16,20,.03);
  overflow: hidden;
  margin: 1rem 0;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.md-typeset details:hover { box-shadow: 0 10px 30px rgba(16,16,20,.08); border-color: var(--rl-hairline-2); }
[data-md-color-scheme="slate"] .md-typeset details { box-shadow: none; }
[data-md-color-scheme="slate"] .md-typeset details:hover { box-shadow: 0 10px 30px rgba(0,0,0,.5); }
/* Neutralize Material's coloured "tip" flavour so cards read as plain panels */
.md-typeset details.tip,
.md-typeset details.note {
  border-color: var(--rl-hairline);
  background: var(--rl-surface);
}
.md-typeset details.tip > summary,
.md-typeset details.note > summary,
.md-typeset details > summary {
  font-family: var(--rl-font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--rl-ink);
  background: var(--rl-surface);
  padding: .95rem 2.4rem .95rem 1.1rem;
}
/* Hide the built-in admonition icon — the emoji in the title is the icon */
.md-typeset details.tip > summary::before,
.md-typeset details.note > summary::before,
.md-typeset details > summary::before { display: none; }
.md-typeset details > summary:hover { color: var(--rl-accent); }
.md-typeset details[open] > summary { border-bottom: 1px solid var(--rl-hairline); }
.md-typeset details > summary::after { color: var(--rl-muted); }

/* ---- Static callouts (note/tip that are NOT collapsible) ---- */
.md-typeset > div.admonition {
  border: 1px solid var(--rl-hairline);
  border-left: 3px solid var(--rl-accent);
  border-radius: 12px;
  background: var(--rl-surface);
  box-shadow: none;
}
.md-typeset > div.admonition > .admonition-title { background: transparent; font-weight: 600; }
.md-typeset > div.admonition > .admonition-title::before { background-color: var(--rl-accent); }

/* ---- Blockquotes (tips in Quick start) ---- */
.md-typeset blockquote {
  border-left: 3px solid var(--rl-accent);
  color: var(--rl-muted);
  background: color-mix(in srgb, var(--rl-accent) 5%, transparent);
  border-radius: 0 10px 10px 0;
  padding: .2rem 1rem;
}

/* ---- Tables: soft, rounded, readable ---- */
.md-typeset table:not([class]) {
  border: 1px solid var(--rl-hairline);
  border-radius: 12px;
  overflow: hidden;
  font-size: .82rem;
}
.md-typeset table:not([class]) th {
  background: var(--md-code-bg-color);
  font-weight: 600;
  color: var(--rl-ink);
}
.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th { border: none; border-bottom: 1px solid var(--rl-hairline); }

/* ---- Screenshots: framed, soft, click-to-zoom ---- */
.md-typeset img {
  border: 1px solid var(--rl-hairline);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(16,16,20,.06);
  cursor: zoom-in;
}

/* ---- Ordered lists: readable numbering ---- */
.md-typeset ol li::marker { color: var(--rl-muted); font-weight: 600; }

/* ---- Footer: quiet single line ---- */
.md-footer-meta { font-size: .72rem; }
.md-footer-copyright { opacity: .82; }

/* ---- Table of contents (right rail): quiet ---- */
.md-nav--secondary .md-nav__title { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; }

/* ===================================================================
   Header + sidebar chrome (Remilink / GitBook)
   =================================================================== */

/* Header: quiet bar; drop the dev-ish repo star/fork widget */
.md-header { box-shadow: none; border-bottom: 1px solid var(--rl-hairline); }
.md-header__title { font-size: .82rem; font-weight: 700; letter-spacing: -.01em; }
.md-header__source { display: none; }
/* Remilink brand mark in the logo slot (links home) */
.rl-brand {
  font-family: var(--rl-font-display);
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: -.01em;
  color: var(--rl-accent);
}
.md-header__button.md-logo { padding: 0; margin-right: 0; }
/* Divider between the Remilink brand and the product name */
.md-header__title {
  border-left: 1px solid var(--rl-hairline);
  margin-left: .6rem;
  padding-left: .7rem;
}
/* Do not repeat the site name in the sidebar on desktop */
@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__title { display: none; }
}
/* Footer links legible on blue */
.md-footer-copyright a,
.md-footer a { color: rgba(255,255,255,.9); text-decoration: underline; text-underline-offset: .15em; }
.md-footer-copyright a:hover,
.md-footer a:hover { color: #fff; }
/* Copyright strip: darker shade of the brand blue for depth */
.md-footer-meta { background: #16296B; }

/* Sidebar: a real rail with a soft active pill (GitBook feel) */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary { border-right: 1px solid var(--rl-hairline); }
}
.md-nav--primary > .md-nav__list > .md-nav__item--section { margin-top: 1.5rem; }
.md-nav--primary > .md-nav__list > .md-nav__item--section:first-child { margin-top: .35rem; }
a.md-nav__link {
  border-radius: 8px;
  padding: .36rem .6rem;
  margin: .07rem 0;
  line-height: 1.35;
  color: var(--md-default-fg-color--light);
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
a.md-nav__link:hover {
  background: color-mix(in srgb, var(--rl-accent) 7%, transparent);
  color: var(--rl-accent);
}
a.md-nav__link.md-nav__link--active {
  background: color-mix(in srgb, var(--rl-accent) 11%, transparent);
  box-shadow: inset 3px 0 0 var(--rl-accent);
  color: var(--rl-accent);
  font-weight: 600;
}