/* docs.elemroot.com — docs-šelli kiht site.css (brändi disainisüsteemi) peale.
   site.css annab tokenid (--brand-*, --ink*, --line, --radius…) + päise/jaluse/nupud;
   siin on dokumentatsioonile eriomane: külgmenüü, TOC-rail, artikli tüpograafia,
   otsing, pager, avalehe plokid. Allikas: /data/dev/docs.elemroot.com/assets/docs.css */

/* ---------- Doc-šell: külgmenüü · artikkel · „sellel lehel" rail ---------- */
.doc-shell {
  display:grid; grid-template-columns:246px minmax(0,1fr); gap:44px;
  align-items:start; padding:26px 0 64px;
}
.doc-shell.has-toc { grid-template-columns:246px minmax(0,1fr) 198px; }

/* ---------- Külgmenüü ---------- */
.doc-side {
  position:sticky; top:78px; max-height:calc(100vh - 96px); overflow-y:auto;
  font-size:14px; padding:4px 2px 24px 0; scrollbar-width:thin;
}
.side-search { margin:2px 0 14px; display:none; }
.side-group { margin-bottom:4px; }
.side-label {
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-faint); margin:18px 0 6px; padding-left:11px;
}
.side-link {
  display:block; padding:6px 11px; border-radius:8px; color:var(--ink-soft);
  font-weight:500; line-height:1.35;
}
.side-link:hover { color:var(--brand-700); background:var(--brand-50); }
.side-link.on { color:var(--brand-700); background:var(--brand-50); font-weight:600; }
.side-head {
  display:block; padding:6px 11px; border-radius:8px; color:var(--ink);
  font-weight:650; line-height:1.35;
}
.side-head:hover { color:var(--brand-700); background:var(--brand-50); }
.side-sub { margin:0 0 2px; }
.side-sub .side-link { padding-left:24px; font-size:13.5px; position:relative; }
.side-sub .side-link::before {
  content:""; position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:99px; background:var(--line);
}
.side-sub .side-link.on::before, .side-sub .side-link:hover::before { background:var(--brand-500); }

/* Mobiilisahtel */
.side-backdrop { display:none; }
.nav-burger {
  display:none; border:1px solid var(--line); background:#fff; border-radius:8px;
  width:36px; height:36px; align-items:center; justify-content:center;
  color:var(--ink-soft); cursor:pointer; flex:none;
}
.nav-burger svg { width:19px; height:19px; }
.nav-burger:hover { color:var(--brand-600); border-color:var(--brand-300); }

/* ---------- „Sellel lehel" rail ---------- */
.doc-toc {
  position:sticky; top:78px; max-height:calc(100vh - 96px); overflow-y:auto;
  font-size:13px; padding:4px 0 24px 16px; border-left:1px solid var(--line);
  scrollbar-width:thin;
}
.doc-toc b {
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-faint); margin:2px 0 10px;
}
.doc-toc a {
  display:block; color:var(--ink-soft); padding:3px 0; line-height:1.45;
  border-left:2px solid transparent; margin-left:-17px; padding-left:15px;
}
.doc-toc a:hover { color:var(--brand-700); }
.doc-toc a.on { color:var(--brand-700); font-weight:600; border-left-color:var(--brand-500); }
.doc-toc a.lvl3 { padding-left:28px; font-size:12.5px; }

/* ---------- Artikkel ---------- */
.doc-main { min-width:0; }
.doc-main h1 { font-size:clamp(26px,3vw,33px); letter-spacing:-.015em; margin:6px 0 14px; }
.doc-main h2 {
  font-size:21.5px; letter-spacing:-.01em; margin:44px 0 14px; padding-bottom:8px;
  border-bottom:1px solid var(--line); scroll-margin-top:84px;
}
.doc-main h3 { font-size:17px; margin:28px 0 10px; scroll-margin-top:84px; }
.doc-main p, .doc-main li { color:var(--ink); }
.doc-main li { margin-bottom:4px; }
.lead { font-size:17px; color:var(--ink-soft); max-width:75ch; }
.muted { color:var(--ink-faint); font-size:14px; }
hr { border:none; border-top:1px solid var(--line); margin:36px 0; }

/* Pealkirjade ankrulingid */
.h-anchor {
  margin-left:8px; color:var(--brand-300); font-weight:400; text-decoration:none;
  opacity:0; transition:opacity .12s;
}
h2:hover .h-anchor, h3:hover .h-anchor { opacity:1; }
.h-anchor:hover { color:var(--brand-600); }

/* ---------- Tabelid ---------- */
.doc-main table {
  border-collapse:collapse; width:100%; margin:16px 0; font-size:14px;
  border:1px solid var(--line); border-radius:var(--radius);
  display:block; overflow-x:auto; /* laiad tabelid keritavad */
}
.doc-main th, .doc-main td {
  text-align:left; padding:9px 13px; border-bottom:1px solid var(--line); vertical-align:top;
}
.doc-main th {
  color:var(--ink-soft); font-weight:600; background:var(--bg-soft); white-space:nowrap;
  font-size:12.5px; text-transform:uppercase; letter-spacing:.03em;
}
.doc-main tr:last-child td { border-bottom:none; }
.doc-main td code { white-space:nowrap; }

/* ---------- Kood ---------- */
code {
  font-family:var(--mono); background:var(--brand-50); color:var(--code-ink);
  padding:1.5px 6px; border-radius:5px; font-size:.88em;
}
a code { color:inherit; }
/* inline-koodi liigid: .val = parameetri vaartus (mida saab paringusse kirjutada),
   .http = HTTP-staatuskood; tavaline <code> = nimed (parameetrid, vastusevaljad) */
code.val { background:var(--val-bg); color:var(--val-ink); }
code.http { background:var(--http-bg); color:var(--http-ink); font-weight:600; }
pre {
  position:relative; background:var(--bg-code); color:var(--pre-ink);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 17px; overflow-x:auto;
  font-family:var(--mono); font-size:13px; line-height:1.55;
  margin:10px 0 18px;
}
pre code { background:none; color:inherit; padding:0; font-size:inherit; border-radius:0; }
.code-label {
  display:inline-block; font-size:11.5px; font-weight:700; color:var(--ink-faint);
  text-transform:uppercase; letter-spacing:.06em; margin:18px 0 2px;
}
.copy-btn {
  position:absolute; top:8px; right:8px; z-index:2;
  background:var(--card); color:var(--ink-soft); border:1px solid var(--line);
  border-radius:7px; font:600 11.5px var(--font); padding:4px 10px; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:color .15s, border-color .15s;
}
.copy-btn:hover { color:var(--brand-700); border-color:var(--brand-300); }
.copy-btn.copied { color:var(--ok); border-color:var(--ok); }

/* ---------- Märkused ---------- */
.note, .warn {
  border-radius:var(--radius); padding:12px 16px; margin:16px 0; font-size:14px;
  border:1px solid; line-height:1.55;
}
.note { background:var(--brand-50); border-color:var(--brand-200); color:var(--note-ink); }
.note a { font-weight:600; }
.warn { background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn-ink); }
.warn a { color:var(--warn); font-weight:600; }
.note strong, .warn strong { color:inherit; }

/* ---------- Parameetri-chipid ---------- */
.req { color:var(--err); font-weight:700; font-size:12px; }
.opt { color:var(--ink-faint); font-size:12px; }

/* ---------- Sisu-sisene sisukorra kast (varjus, kui TOC-rail paistab) ---------- */
.toc {
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 18px; margin:20px 0;
}
.toc b { display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:8px; }
.toc ul { margin:0; padding-left:18px; columns:2; column-gap:28px; }
.toc li { font-size:13.5px; margin-bottom:3px; }
@media (min-width:1101px) { .doc-shell.has-toc .toc { display:none; } }

/* ---------- Sisu-lingikaardid (lehtede lõpus) ---------- */
.cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0; }
.card {
  display:block; padding:16px 18px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius);
  color:var(--ink); transition:border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover { border-color:var(--brand-300); box-shadow:var(--shadow-md); transform:translateY(-1px); color:var(--ink); }
/* Masinloetava spec-faili kaart — visuaalselt eristatud (katkendjoon + mahedam taust),
   sest klikk avab/laadib toore YAML-faili, mitte järgmist dokilehte. */
.card-spec { border-style:dashed; background:var(--bg-soft); }
.card-spec b::before { content:"⬇ "; font-size:13px; }
.card b { display:block; color:var(--brand-600); margin-bottom:4px; font-size:15px; }
.card span { color:var(--ink-soft); font-size:13.5px; }

/* ---------- Eelmine / järgmine ---------- */
.pager { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:44px 0 6px; }
.pager a {
  display:block; padding:13px 17px; border:1px solid var(--line); border-radius:var(--radius);
  color:var(--ink); transition:border-color .15s, box-shadow .15s;
}
.pager a:hover { border-color:var(--brand-300); box-shadow:var(--shadow-sm); }
.pager .dir { display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:3px; }
.pager .t { font-weight:600; color:var(--brand-700); font-size:14.5px; }
.pager .next { text-align:right; grid-column:2; }

/* ---------- Otsing ---------- */
.docs-search { position:relative; }
.docs-search input {
  width:230px; padding:7px 12px 7px 32px; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13.5px; color:var(--ink); background:var(--bg-soft); outline:none;
  transition:border-color .15s, background .15s, width .2s;
}
.docs-search input:focus { border-color:var(--brand-400); background:#fff; box-shadow:0 0 0 3px var(--brand-100); width:290px; }
.docs-search .s-ico {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color:var(--ink-faint); pointer-events:none;
}
.docs-search kbd {
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font:600 11px var(--mono); color:var(--ink-faint); background:#fff;
  border:1px solid var(--line); border-radius:5px; padding:1px 6px; pointer-events:none;
}
.docs-search input:focus ~ kbd { display:none; }
.search-panel {
  position:absolute; top:calc(100% + 10px); right:0; z-index:80;
  width:min(600px, calc(100vw - 32px)); max-height:min(66vh, 520px); overflow-y:auto;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg);
  padding:6px;
}
.side-search .search-panel { left:0; right:auto; width:min(600px, calc(100vw - 48px)); }
.search-panel .sp-page {
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-faint); padding:10px 12px 4px;
}
.search-panel .sp-hit { display:block; padding:8px 12px; border-radius:8px; color:var(--ink); }
.search-panel .sp-hit:hover, .search-panel .sp-hit.sel { background:var(--brand-50); }
.search-panel .sp-h { font-weight:600; font-size:14px; color:var(--brand-800); }
.search-panel .sp-s { font-size:12.8px; color:var(--ink-soft); margin-top:1px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.search-panel mark { background:var(--brand-100); color:var(--brand-900); border-radius:3px; padding:0 1px; }
.search-panel .sp-none { padding:16px 14px; color:var(--ink-faint); font-size:14px; }
.search-panel .sp-load { padding:16px 14px; color:var(--ink-faint); font-size:13.5px; }

/* ---------- Keelelüliti linkidena (site.css stiilib nuppe) ---------- */
.lang-switch a {
  display:inline-block; padding:5px 10px; font-size:12.5px; font-weight:600;
  color:var(--ink-faint); line-height:1.2;
}
.lang-switch a:hover { color:var(--brand-700); }
.lang-switch a.on { background:var(--brand-600); color:#fff; }

/* ---------- Avaleht ---------- */
.docs-hero {
  background:var(--hero-grad);
  border-bottom:1px solid var(--line);
}
.docs-hero-in { display:grid; grid-template-columns:minmax(0,11fr) minmax(0,9fr); gap:48px; align-items:center; padding:52px 0 56px; }
.docs-hero h1 { font-size:clamp(29px,3.6vw,40px); letter-spacing:-.02em; }
.docs-hero h1 em { font-style:normal; color:var(--brand-600); }
.docs-hero p.sub { font-size:17px; color:var(--ink-soft); margin:14px 0 24px; max-width:54ch; }
.docs-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }
.hero-code {
  border-radius:var(--radius-lg); border:1px solid var(--line); background:#fff;
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.hero-code .hc-bar {
  display:flex; align-items:center; gap:7px; padding:10px 14px;
  background:var(--bg-soft); border-bottom:1px solid var(--line);
  font:600 12px var(--mono); color:var(--ink-faint);
}
.hero-code .hc-bar i { width:10px; height:10px; border-radius:99px; background:var(--brand-200); font-style:normal; }
.hero-code pre { margin:0; border:none; border-radius:0; font-size:12.5px; }
.docs-services { padding:40px 0 10px; }
.docs-services h2, .docs-start h2 { font-size:24px; margin:0 0 6px; }
.docs-services .sect-sub, .docs-start .sect-sub { color:var(--ink-soft); font-size:14.5px; margin:0 0 22px; }
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc-grid .service-card .go { display:inline-block; margin-top:2px; }
.docs-start { padding:34px 0 12px; }
.start-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px; }
.start-step {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:20px 22px 18px; position:relative;
}
.start-step .num {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:99px; background:var(--brand-600); color:#fff;
  font-weight:700; font-size:14.5px; margin-bottom:12px;
}
.start-step h3 { font-size:16px; margin-bottom:6px; }
.start-step p { margin:0; font-size:13.8px; color:var(--ink-soft); }

/* ---------- API-viite leht (Swagger) ---------- */
.ref-main #swagger-ui { padding:4px 0 40px; }
.ref-head { margin:4px 0 6px; }
.ref-head h1 { font-size:clamp(24px,3vw,30px); letter-spacing:-.015em; margin:6px 0 8px; }
.ref-head p { color:var(--ink-soft); font-size:15px; margin:0 0 8px; max-width:75ch; }

/* ---------- Kohandused ---------- */
@media (max-width:1100px) {
  .doc-shell.has-toc { grid-template-columns:246px minmax(0,1fr); }
  .doc-toc { display:none; }
}
@media (max-width:940px) {
  .docs-hero-in { grid-template-columns:1fr; gap:30px; padding:36px 0 42px; }
  .svc-grid, .start-steps { grid-template-columns:1fr; }
}
@media (max-width:960px) {
  .doc-shell, .doc-shell.has-toc { grid-template-columns:1fr; gap:0; }
  .nav-burger { display:inline-flex; }
  .doc-side {
    position:fixed; z-index:90; top:0; left:0; bottom:0; width:min(310px, 84vw);
    max-height:none; background:#fff; border-right:1px solid var(--line);
    box-shadow:var(--shadow-lg); padding:18px 16px 30px;
    transform:translateX(-105%); transition:transform .2s ease;
  }
  body.drawer-open .doc-side { transform:translateX(0); }
  .side-backdrop {
    display:block; position:fixed; inset:0; z-index:85; background:rgba(20,30,74,.35);
    opacity:0; pointer-events:none; transition:opacity .2s;
  }
  body.drawer-open .side-backdrop { opacity:1; pointer-events:auto; }
  body.drawer-open { overflow:hidden; }
  .side-search { display:block; }
  .head-search { display:none; }
  .cards, .pager { grid-template-columns:1fr; }
  .pager .next { grid-column:auto; text-align:left; }
  .toc ul { columns:1; }
}
@media (max-width:560px) {
  .head-actions .btn { display:none; } /* CTA on sahtlis ja jaluses olemas */
}
@media (prefers-reduced-motion:reduce) {
  .doc-side { transition:none; }
}