/**
 * RU: Стили панели слоёв «что видно на этом зуме» (Ф2.6).
 *
 *     Отдельный файл, а не строки в public.css: public.css принадлежит другому
 *     потоку работ, и одновременная правка одного файла двумя руками уже стоила
 *     проекту потерянных изменений. Файл подключается из public/shell/city.html
 *     после public.css — значит, при равной силе селектора выигрывает он, и
 *     переопределять что-то через !important не нужно.
 *
 *     Цвета берутся из токенов kartivi.css (--k-surface, --line, --k-text-muted) по той же
 *     причине, по которой в карте нет зашитых hex: тема переключается день/ночь/контраст,
 *     и собственный цвет остался бы дневным в ночном меню. Там, где токена нет,
 *     значение задано через var() с запасным — иначе панель на странице без токенов
 *     станет невидимой.
 *
 * EN: Styles for the "what is visible at this zoom" layers panel (phase 2.6).
 *
 *     A separate file rather than lines in public.css: public.css belongs to another work stream,
 *     and editing one file with two hands at once has already cost this project lost changes. The
 *     file is linked from public/shell/city.html after public.css — so with equal selector
 *     strength it wins, and nothing needs overriding via !important.
 *
 *     Colours come from the kartivi.css tokens (--k-surface, --line, --k-text-muted) for the same reason
 *     the map has no hardcoded hex: the theme switches day/night/contrast, and an own colour would
 *     stay daylight inside a night menu. Where a token is missing, the value goes through var()
 *     with a fallback — otherwise the panel turns invisible on a page without tokens.
 */

/* RU: Панель живёт внутри прокручиваемого меню слоёв, поэтому у неё нет своего фона
       и рамки — они бы нарисовали «окно в окне». Отделяет её только та же линия,
       что и остальные группы меню.
   EN: The panel lives inside the scrollable layers menu, hence no background or border of its
       own — they would draw a "window inside a window". It is separated only by the same rule
       the other menu groups use. */
.layer-panel {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.45rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line, #dfe6e2);
}

.layer-panel[hidden] {
  display: none !important;
}

.layer-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--k-text-muted, #46574c);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* RU: Счётчик слоёв — не заголовок, а факт, и читаться должен слабее названия
       масштаба: сначала «где я», потом «сколько здесь».
   EN: The layer counter is a fact rather than a heading and must read weaker than the scale
       name: first "where am I", then "how much is here". */
.layer-panel-summary {
  margin-left: auto;
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--k-text-muted, #46574c);
  font-variant-numeric: tabular-nums;
}

.layer-panel-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.layer-panel-group > summary {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.16rem 0;
  font-size: 0.74rem;
  cursor: pointer;
  list-style: none;
}

.layer-panel-group > summary::-webkit-details-marker {
  display: none;
}

/* RU: Треугольник рисуем сами: системный маркер в Safari и Chrome разного размера и
       сдвигает базовую линию строки, из-за чего список «дышит» при раскрытии.
   EN: We draw the triangle ourselves: the native marker differs in size between Safari and
       Chrome and shifts the row's baseline, making the list "breathe" when expanded. */
.layer-panel-group > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  opacity: 0.5;
  transform: translateY(-1px);
  transition: transform 120ms ease;
}

.layer-panel-group[open] > summary::before {
  transform: translateY(-1px) rotate(90deg);
}

.layer-panel-name {
  font-weight: 600;
}

/* RU: Пометка состояния прижата вправо и набрана мелко: это ответ на вопрос, а не
       заголовок. Табличные цифры здесь не нужны — в тексте пометки цифр нет вовсе,
       и это как раз то, чего добивалась Ф2.1.
   EN: The state mark is pushed right and set small: it answers a question rather than heading
       one. Tabular figures are pointless here — the mark's text contains no digits at all, which
       is exactly what phase 2.1 was after. */
.layer-panel-mark {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.64rem;
  font-weight: 600;
  white-space: nowrap;
}

/* RU: Три состояния — три степени яркости, а не три оттенка одного цвета. Разница
       обязана читаться и при дальтонизме, поэтому «видно» отличается от остальных
       насыщенностью и весом, а не только тоном (то же правило, что у кодирования
       статуса ТП формой в P94 Ф1).
   EN: Three states, three degrees of prominence rather than three shades of one hue. The
       difference must read under colour blindness too, so "visible" differs by saturation and
       weight, not tone alone (the same rule as encoding substation status by shape in P94
       phase 1). */
.layer-panel-group.is-visible > summary,
.layer-panel-item.is-visible {
  color: var(--k-text, #1f2a25);
}

.layer-panel-group.is-ahead > summary,
.layer-panel-item.is-ahead {
  color: var(--k-text-muted, #46574c);
  opacity: 0.75;
}

.layer-panel-group.is-passed > summary,
.layer-panel-item.is-passed {
  color: var(--k-text-muted, #46574c);
  opacity: 0.55;
}

.layer-panel-item {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  /* RU: Отступ слева выравнивает строку слоя под название группы, а не под её
         треугольник: иначе «почему» читается как продолжение заголовка.
     EN: The left indent aligns a layer row under the group name rather than under its triangle:
         otherwise the "why" reads as a continuation of the heading. */
  padding: 0.1rem 0 0.1rem 0.85rem;
  font-size: 0.66rem;
  line-height: 1.35;
}

/* RU: «Почему» — самая длинная строка панели, и переносить её обязательно: обрезка
       по многоточию убила бы ровно ту часть объяснения, ради которой поле и заведено.
   EN: The "why" is the panel's longest line and must wrap: an ellipsis truncation would cut off
       exactly the part of the explanation the field exists for. */
.layer-panel-why {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* RU: Панель шире меню быть не должна: меню позиционировано у правого края карты, и
       его рост наружу закрывает саму карту. 17rem — предел, за которым на телефоне
       в портретной ориентации панель начинает перекрывать половину экрана.
   EN: The panel must not be wider than the menu: the menu is anchored to the map's right edge
       and growing outwards covers the map itself. 17rem is the limit beyond which, on a phone in
       portrait, the panel starts covering half the screen. */
.layers-menu .layer-panel {
  max-width: 17rem;
}