/* Documentatia AERE: asezare pe trei coloane, in interiorul foii albe pe care o construieste
   carcasa comuna (dapp-shell.js). Antetul cerneala, capul si subsolul vin de la carcasa; aici e
   doar ce e specific documentatiei: arborele din stanga, corpul, si cuprinsul paginii din dreapta.

   Culorile sunt aceleasi cu ale sitului, nu altele apropiate: doua palete aproape la fel sunt mai
   rele decat doua evident diferite. */

:root {
  --doc-ink: #0a1628;
  --doc-ink-soft: rgba(10, 22, 40, 0.72);
  --doc-ink-faint: rgba(10, 22, 40, 0.55);
  --doc-line: rgba(10, 22, 40, 0.10);
  --doc-sky-50: #f4f9ff;
  --doc-sky-100: #e8f1fb;
  --doc-sky-200: #d1e3f5;
  --doc-sky-500: #3d7fb8;
  --doc-sky-600: #1f5a8f;
}

.doc-cadru {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 210px;
  gap: 40px;
  align-items: start;
  margin: 26px 0 60px;
}

/* ------------------------------------------------------------------ arbore */
.doc-bara {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 8px;
  border-right: 1px solid var(--doc-line);
}
.doc-grup { margin-bottom: 20px; }
.doc-grup-titlu {
  font: 600 11px/1 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--doc-ink-faint);
  margin: 0 0 10px;
}
.doc-bara ul { list-style: none; margin: 0; padding: 0; }
.doc-bara li { margin: 0; }
.doc-bara a {
  display: block;
  padding: 6px 10px;
  border-radius: 7px;
  font: 400 13.5px/1.4 "Inter", ui-sans-serif, system-ui;
  color: var(--doc-ink-soft);
  text-decoration: none;
}
.doc-bara a:hover { background: var(--doc-sky-50); color: var(--doc-sky-600); }
.doc-bara a.activ { background: var(--doc-sky-100); color: var(--doc-sky-600); font-weight: 600; }
.doc-de-scris {
  font: 500 9.5px/1 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a6a2a;
  background: #fdf3e0;
  border-radius: 4px;
  padding: 2px 5px;
  vertical-align: 1px;
}

/* ------------------------------------------------------------------- corp */
.doc-corp { min-width: 0; }
.doc-firimituri {
  font: 400 12px/1 "Geist Mono", ui-monospace, monospace;
  color: var(--doc-ink-faint);
  margin: 0 0 22px;
}
.doc-firimituri a { color: var(--doc-sky-600); text-decoration: none; }
.doc-firimituri span { margin: 0 7px; opacity: 0.5; }

.doc-corp h2 {
  font: 700 24px/1.2 "Inter Tight", "Inter", ui-sans-serif, system-ui !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--doc-ink) !important;
  margin: 38px 0 12px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--doc-line);
}
.doc-corp h3 {
  font: 600 17px/1.3 "Inter", ui-sans-serif, system-ui !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--doc-ink) !important;
  margin: 28px 0 10px !important;
}
.doc-corp h4 {
  font: 600 14px/1.3 "Inter", ui-sans-serif, system-ui !important;
  text-transform: none !important;
  color: var(--doc-ink-soft) !important;
  margin: 22px 0 8px !important;
}
.doc-corp p { font: 400 15.5px/1.72 "Inter", ui-sans-serif, system-ui; color: var(--doc-ink-soft); margin: 0 0 15px; }
.doc-corp ul, .doc-corp ol { margin: 0 0 16px; padding-left: 22px; }
.doc-corp li { font: 400 15.5px/1.72 "Inter", ui-sans-serif, system-ui; color: var(--doc-ink-soft); margin: 0 0 6px; }
.doc-corp a { color: var(--doc-sky-600); }
.doc-corp strong { color: var(--doc-ink); font-weight: 600; }
.doc-corp code {
  font: 400 13px/1.5 "Geist Mono", ui-monospace, monospace;
  background: var(--doc-sky-50);
  border: 1px solid var(--doc-line);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--doc-ink);
}
.doc-cod {
  background: #0a1628;
  border-radius: 10px;
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0 0 18px;
  position: relative;
}
.doc-cod code {
  font: 400 13px/1.7 "Geist Mono", ui-monospace, monospace;
  background: none;
  border: 0;
  padding: 0;
  color: #d7e6f5;
  white-space: pre;
}
.doc-cod[data-limba]::before {
  content: attr(data-limba);
  position: absolute;
  right: 12px;
  top: 8px;
  font: 500 10px/1 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(215, 230, 245, 0.45);
}
.doc-corp blockquote {
  margin: 0 0 18px;
  padding: 14px 18px;
  background: var(--doc-sky-50);
  border-left: 3px solid var(--doc-sky-500);
  border-radius: 0 8px 8px 0;
  font: 400 14.5px/1.65 "Inter", ui-sans-serif, system-ui;
  color: var(--doc-ink-soft);
}
.doc-tabel { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--doc-line); border-radius: 10px; }
.doc-tabel table { width: 100%; border-collapse: collapse; }
.doc-tabel th {
  text-align: left;
  font: 600 11px/1 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--doc-ink-faint);
  padding: 12px 14px;
  background: var(--doc-sky-50);
  border-bottom: 1px solid var(--doc-line);
  white-space: nowrap;
}
.doc-tabel td {
  font: 400 13.5px/1.6 "Inter", ui-sans-serif, system-ui;
  color: var(--doc-ink-soft);
  padding: 11px 14px;
  border-bottom: 1px solid var(--doc-line);
  vertical-align: top;
}
.doc-tabel tr:last-child td { border-bottom: 0; }

.doc-lipsa {
  background: #fdf3e0;
  border: 1px solid #f0dcb4;
  border-radius: 10px;
  padding: 16px 18px;
  font: 400 14.5px/1.65 "Inter", ui-sans-serif, system-ui;
  color: #6b5220;
}

.doc-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 46px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--doc-line);
}
.doc-nav a {
  display: block;
  max-width: 46%;
  padding: 12px 16px;
  border: 1px solid var(--doc-line);
  border-radius: 10px;
  text-decoration: none;
  font: 600 14px/1.35 "Inter", ui-sans-serif, system-ui;
  color: var(--doc-ink);
}
.doc-nav a:hover { border-color: var(--doc-sky-500); background: var(--doc-sky-50); }
.doc-nav a span {
  display: block;
  font: 500 10px/1 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--doc-ink-faint);
  margin-bottom: 6px;
}
.doc-nav a.urm { text-align: right; margin-left: auto; }

/* ---------------------------------------------------------------- cuprins */
.doc-cuprins { position: sticky; top: 96px; }
.doc-cuprins-titlu {
  font: 600 11px/1 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--doc-ink-faint);
  margin: 0 0 10px;
}
.doc-cuprins ul { list-style: none; margin: 0; padding: 0; }
.doc-cuprins a {
  display: block;
  padding: 4px 0;
  font: 400 13px/1.45 "Inter", ui-sans-serif, system-ui;
  color: var(--doc-ink-soft);
  text-decoration: none;
}
.doc-cuprins a:hover { color: var(--doc-sky-600); }
.doc-cuprins li.n3 a { padding-left: 12px; font-size: 12.5px; color: var(--doc-ink-faint); }

/* ------------------------------------------------------- pagina de start */
/* Elementele dinauntru NU se numesc "card": carcasa sitului injecteaza
   `.container [class*="card"] { border: 1px solid ... }`, deci orice clasa care contine
   sirul card capata un chenar. Masurat in pagina, pe regula care se potriveste, nu ghicit.
   Se redenumeste, nu se suprascrie: o batalie de !important cu propria carcasa se pierde la
   urmatoarea ei schimbare. */
.doc-carduri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0 60px; }
.doc-card {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--doc-line);
  border-radius: 12px;
  text-decoration: none;
  background: #fff;
}
.doc-card:hover { border-color: var(--doc-sky-500); box-shadow: 0 6px 24px rgba(31, 90, 143, 0.10); }
.doc-sect-titlu { font: 700 19px/1.2 "Inter Tight", "Inter", ui-sans-serif, system-ui; color: var(--doc-ink); margin-bottom: 8px; }
.doc-sect-text { font: 400 14px/1.6 "Inter", ui-sans-serif, system-ui; color: var(--doc-ink-soft); margin-bottom: 12px; }
.doc-sect-nr { font: 500 10.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--doc-ink-faint); }

/* ------------------------------------------------------------------ ecran mic */
@media (max-width: 1100px) {
  .doc-cadru { grid-template-columns: 220px minmax(0, 1fr); }
  .doc-cuprins { display: none; }
  .doc-carduri { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .doc-cadru { grid-template-columns: 1fr; gap: 24px; }
  .doc-bara { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--doc-line); padding-bottom: 18px; }
  .doc-carduri { grid-template-columns: 1fr; }
  .doc-nav { flex-direction: column; }
  .doc-nav a { max-width: none; }
  .doc-nav a.urm { text-align: left; margin-left: 0; }
}

/* Carcasa pune `.container a { border-bottom: 1px solid ... }`, potrivita pentru o legatura in
   proza si nepotrivita pentru navigatie: bara laterala, cuprinsul si firimiturile capatau cate o
   linie sub fiecare rand. Regula de acolo NU e `!important`, are specificitate (0,1,1), deci se
   trece cu (0,2,1). Masurat in pagina pe regula care se potriveste, nu presupus.
   In corpul textului linia RAMANE: acolo chiar ajuta cititorul. */
.doc-cadru .doc-bara a,
.doc-cadru .doc-cuprins a,
.doc-cadru .doc-firimituri a,
.doc-cadru .doc-nav a,
.doc-carduri .doc-card { border-bottom: 0; }
.doc-cadru .doc-nav a { border: 1px solid var(--doc-line); }
.doc-cadru .doc-nav a:hover { border-color: var(--doc-sky-500); }