/* ============================================================
   page-settings.css — горизонтальный inline menu-trigger в топбаре

   Поведение:
     - "menu" — короткая зелёная полоска + надпись, СРАЗУ после brand
     - Hover (или focus-within) — выезжает панель вниз
     - Без click-toggle: чисто CSS hover-driven
     - Закрывается когда курсор уходит с trigger+panel

   Используется на всех страницах: index, reader, word, mywords.
   Содержимое panel — page-specific (тема + другие настройки).
   ============================================================ */

/* Wrapper — relative-positioned контейнер для абсолютной панели.
   v28.2 (2026-05-16): align-self: stretch — wrapper тянется на всю высоту
   topbar flex-row. Это даёт .menu-panel { height: 100% } полную высоту
   topbar (~88px вместо ~36px от content), чтобы перекрыть hearts/chapter-stack
   по вертикали когда панель выезжает. */
.menu-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
}

/* Сам триггер — flex-row: bar + label */
.menu-trigger {
  display: inline-flex;
  align-items: center;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  outline: 0;
}

.menu-trigger__bar {
  display: inline-block;
  width: 3px;
  height: 24px;                            /* вертикальная полоска */
  background: var(--good);                 /* зелёный мох — единый сигнальный токен */
  border-radius: var(--radius-pill);
  transition: height 0.18s ease, background 0.12s, filter 0.12s;
}

.menu-trigger__label {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
  user-select: none;
  transition: color 0.12s, letter-spacing 0.12s;
}

/* Hover / focus / open — bar удлиняется (по вертикали), label проявляется */
.menu-wrapper:hover .menu-trigger__bar,
.menu-wrapper:focus-within .menu-trigger__bar {
  height: 44px;
  filter: brightness(1.15);
}

.menu-wrapper:hover .menu-trigger__label,
.menu-wrapper:focus-within .menu-trigger__label {
  color: var(--ink-muted);
  letter-spacing: 0.26em;
}

/* ===== Панель — выезжает ВПРАВО из-под триггера на hover =====
   Anchor left: 100% → панель примыкает к правому краю полоски БЕЗ мёртвого зазора.
   2026-05-15 FIX: зазор от полоски теперь padding-left (часть бокса → hoverable),
   а НЕ margin-left. Раньше margin-left:12px создавал мёртвую зону: курсор при
   переходе trigger→панель терял :hover → панель мгновенно гасла (pointer-events:none)
   → ссылки физически нельзя было кликнуть. padding-left делает hover-мост непрерывным. */
.menu-panel {
  /* 2026-05-16 v20: переход на «strip-wall expand» паттерн как у сжатых заметок
     (margin-note-saved--floating.is-strip → hover expand на полную ширину).
     User: «выезжать должно меню так же как выезжают сокращённые заметки —
     одна анимация, разные направления». Strip-bubble: width 8 → 240, transform
     translateX держит anchor. Здесь: scaleX 0 → 1 от transform-origin: left
     center = панель «выезжает из-под полоски» вправо, без opacity-fade hack.
     Origin: left center нужен чтобы рост шёл В правую сторону, не во все.

     v28.2 (2026-05-16): SOLID background var(--surface) + z-index 70 чтобы
     панель ПОЛНОСТЬЮ перекрывала элементы topbar под собой (chapter-stack,
     bookmarks hearts, ghost stack чисел). User: «когда выезжает, по странице
     не должно быть видно — только навигация». Background = surface (same as
     topbar) — выглядит как «расширение полоски топбара», a not floating overlay.
     Padding: vertical 12px чтобы заполнить высоту topbar (~56px overall).

     v32 (2026-05-20): Background СНЯТ обратно (transparent) — user явно
     попросила «чтобы не выезжал фон за навигацией». Теперь видны только
     сами chip'ы (link'и сохраняют свой собственный chip bg/border), а
     hearts/chapter-stack за ними остаются видимыми. Trade-off: визуально
     чуть гуще когда панель открыта над heart-bar, но user OK. */
  position: absolute;
  /* v28.5/.6/.7 (2026-05-16): panel cover topbar, content-driven height,
     responsive width auto 1-row/2-row (user choice).

     Width strategy (v28.7):
     - default `width: max-content` — panel natural к содержимому (3 chips в ряд)
     - `max-width: 280px` (wide viewport) — ограничение чтобы panel не убегал
       за topbar.right при увеличении content
     - `@media (max-width: 700px)` ниже — `max-width: 175px` форсит 2-row layout
       (2 chip помещается на ряд, 3й wrap'ается ниже)

     Height strategy:
     - top: -12px → cover topbar.padding-top полностью
     - min-height: calc(100% + 25px) = 88px = topbar.height (1-row mode)
     - При wrap (2 rows) content расширяет высоту, panel грозит вниз
     - border-bottom 1px следует за новой нижней кромкой (divider continues) */
  /* v28.9 (2026-05-17): measurement-driven dimensions через CSS vars
     (--menu-panel-top, --menu-panel-h) set'ятся в reader.js:setTopbarMetrics
     через ResizeObserver на topbar. Это убирает eyeballed хардкоды -12/-13.
     - top: var(--menu-panel-top) = -(topbar.padding-top) → panel starts at topbar.top
     - height: var(--menu-panel-h) = topbar.height - 1 → panel stops at border.top
     - border: 0 (без border-bottom) — топбар-divider остаётся видим под panel
     - fallbacks для случая если JS не загрузился (degrade gracefully) */
  top: var(--menu-panel-top, -12px);
  left: 100%;
  width: max-content;
  max-width: 360px;
  height: var(--menu-panel-h, 87px);
  padding: 0 16px 0 12px;              /* horizontal only — vertical через align-items */
  display: flex;
  align-items: center;
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 70;                         /* > topbar(50), > bookmarks(1), > chapter-stack(0) */
  pointer-events: none;
  transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
  white-space: nowrap;
  background: transparent;             /* v32: фон снят — за панелью видны сердечки/topbar контент */
  border: 0;                           /* no border-bottom — divider от topbar остаётся */
}

.menu-wrapper:hover .menu-panel,
.menu-wrapper:focus-within .menu-panel {
  transform: scaleX(1);
  pointer-events: auto;
}

/* ===== Site-nav links внутри menu-panel =====
   Горизонтальный ряд ссылок (slides out направо от trigger'а).
   Logout отделён вертикальным separator'ом + warm-bad hover. */
.menu-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;                 /* горизонтальный ряд, не stacked */
  align-items: center;
  gap: 8px;                            /* чипы несут свой padding → меньше gap */
  /* v28.6 (2026-05-16): allow two-row when content не помещается.
     flex-wrap: wrap + .menu-panel min-height вместо fixed bottom — panel
     грозит вниз когда links wrap'аются. white-space: nowrap убран — text внутри
     link и так не должен wrap'аться (4-15 символов), а nowrap препятствовал
     любому wrap'у даже на flex level (хотя flex-wrap separate property —
     убираем чтоб не путать). */
  flex-wrap: wrap;
  row-gap: 6px;                        /* tighter vertical gap при wrap */
}

/* Site-nav links — чип-кнопки (как breadcrumb-чип / перевод-чип): сразу видно
   что кликабельно + крупнее hit-target. 2026-05-15: были «чистым текстом» —
   не читались как кнопки, маленькая зона клика. */
.menu-link {
  display: inline-block;
  padding: 4px 11px;
  background: color-mix(in oklab, var(--surface-2) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--border-soft) 60%, transparent);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  /* v28.6: positioning context для .badge (notch на «Мои слова» chip).
     Без этого badge { position: absolute } anchor'ился к <html> → notch
     висел в правом верхнем углу viewport. */
  position: relative;
}

.menu-link:hover,
.menu-link:focus-visible {
  background: var(--hl);
  border-color: var(--border);
  color: var(--ink);
  outline: 0;
}

/* Logout — тот же чип, чуть тише + warm-bad hover (separator-линия убрана:
   с чип-кнопками вертикальная черта не нужна). */
.menu-link--logout {
  color: var(--ink-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* v28.7/.8 (2026-05-16): narrow viewport — panel ужимается до 2-row layout.
   v28.7 был max-width 175px — fits только 1 chip → 3 строки stack (broken).
   v28.8 (user feedback «в два ряда максимум»): min-width 255px guarantee 2-chip row.
     - 255 = chip «Библиотека» ~100 + chip «Мои слова⑦» ~115 + gap 8 + padding 28 + buffer 4
     - width: 255 (fixed) overrides default max-content + max-width:360 на narrow
     - min-width: 255 — даже если viewport ужать ниже 700px, panel НЕ съёжится дальше
       (overflow за viewport.right допустим; альтернатива — горизонтальный wrap бесконечно)
   Breakpoint 700px — синхронизирован с .chapter-stack__title display:none. */
@media (max-width: 700px) {
  .menu-panel {
    width: 255px;
    min-width: 255px;
    max-width: 255px;
  }
  /* Explicit left-align на узких — чтобы Выйти (row 2) выровнялся с Библиотекой,
     не центрировался. По умолчанию flex justify-content: flex-start, но на всякий. */
  .menu-nav {
    justify-content: flex-start;
  }
}

.menu-link--logout:hover,
.menu-link--logout:focus-visible {
  color: var(--bad);
  border-color: color-mix(in oklab, var(--bad) 45%, transparent);
}