/* Страница справочника: боковая навигация и плотные таблицы.
   Собирается генератором из reference.md, руками её не правят —
   правится spec/epwa.json и запускается spec/generate.py. */

.doc {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 5vw, 3.5rem) 4rem;
}

/* Навигация липнет к экрану: справочник длинный, и место в нём терять нельзя. */
.doc-nav {
  position: sticky;
  top: 1.5rem;
  align-self: start;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  display: grid;
  gap: .1rem;
  padding-bottom: 2rem;
  font-size: .88rem;
}
.doc-nav a { color: var(--slate); text-decoration: none; padding: .18rem 0; }
.doc-nav a:hover { color: var(--ink); }
.doc-nav .lvl2 { font-variation-settings: 'wght' 600; color: var(--ink); margin-top: .7rem; }
.doc-nav .lvl3 { padding-left: .9rem; }
.doc-nav .lvl3 code { font-size: .82em; }

.doc-body { min-width: 0; padding-top: .3rem; }
.doc-body h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1rem; }
.doc-body h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin: 3rem 0 .8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}
.doc-body h3 {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 1rem;
  margin: 2rem 0 .6rem;
  color: var(--blue);
}
/* Метод — запись: имя, одна фраза и поля «термин — значение». */
.doc-body h4 {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .95rem;
  font-weight: 500;
  margin: 2.2rem 0 .4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}
.doc-body h4 code { color: var(--ink); }
.doc-body h4 + p { margin-top: 0; }
.doc-body dl {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: .2rem 1rem;
  margin: .7rem 0 0;
  font-size: .92rem;
}
.doc-body dt { color: var(--slate); font-size: .84rem; padding-top: .1rem; }
.doc-body dd {
  margin: 0;
  color: var(--ink);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .82rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.doc-body dd code { font-size: 1em; }
.doc-body dd a { color: var(--blue); }

.doc-body p { color: var(--slate); max-width: 46rem; }
.doc-body ul { color: var(--slate); padding-left: 1.1rem; margin: .8rem 0 0; }
.doc-body li { margin-bottom: .2rem; }

/* Таблицы справочника широкие: прокручивается обёртка, а не сама таблица —
   min-width на элементе с overflow-x распирал бы его наружу. */
.table-scroll { overflow-x: auto; margin: 1.1rem 0 0; }
.doc-body table {
  width: 100%;
  min-width: 26rem;   /* таблиц осталось мало, и все они узкие */
  border-collapse: collapse;
  font-size: .86rem;
}
.doc-body th, .doc-body td {
  text-align: left;
  vertical-align: baseline;
  padding: .6rem .9rem .6rem 0;
  border-top: 1px solid var(--rule);
}
.doc-body thead th {
  border-top: none;
  border-bottom: 1px solid var(--rule);
  color: var(--slate);
  font-size: .8rem;
  font-variation-settings: 'wght' 600;
}
.doc-body td { color: var(--slate); }
.doc-body td:first-child, .doc-body th:first-child { padding-right: 1.2rem; }
.doc-body td:first-child code { color: var(--ink); }
/* Имена вызовов не режем: рвать `epwa.getInfo` посреди слова — хуже,
   чем прокрутить таблицу. Переносить разрешаем только длинные куски кода
   внутри текста, где иначе распирает страницу. */
.doc-body code { font-size: .86em; white-space: nowrap; }
.doc-body p code, .doc-body li code { white-space: normal; overflow-wrap: anywhere; }
.doc-body td code { white-space: normal; }
.doc-body td:first-child code { white-space: nowrap; }

@media (max-width: 48rem) {
  .doc-body dl { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .doc-body dt { margin-top: .5rem; }
}

@media (max-width: 62rem) {
  /* minmax(0, …), иначе горизонтальный список разделов растянет всю страницу. */
  .doc { grid-template-columns: minmax(0, 1fr); }
  .doc-nav {
    min-width: 0;
    position: static;
    max-height: none;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    gap: 1rem;
    padding: 0 0 1.5rem;
    border-bottom: 1px solid var(--rule);
  }
  .doc-nav .lvl3 { display: none; }   /* в строку помещаются только разделы */
  .doc-nav .lvl2 { margin-top: 0; white-space: nowrap; }
}