/* Authored shared menu surface. */
  /* ============ ВЫПАДАЮЩИЕ МЕНЮ ТУЛБАРА ============
     Меню — мини-остров над шевроном группы: тот же язык, что у больших
     островов (радиус 12, тень, кайма), внутри строки 28 с радиусом 8. */
  .menu {
    display: none;
    position: fixed;
    font-family: var(--arhix-font);
    z-index: var(--arhix-layer-menu);
    width: max-content;
    min-width: var(--arhix-menu-min-width);
    background: var(--arhix-surface-raised);
    border: 1px solid var(--arhix-island-border);
    border-radius: var(--arhix-radius-island);
    box-shadow: var(--arhix-shadow-island);
    padding: 4px;
  }
  .menu.is-open { display: block; }
  .menu__list { display: flex; flex-direction: column; gap: var(--arhix-space-row); }
  .menu--cols .menu__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(168px, 1fr));
    column-gap: var(--arhix-space-micro);
    row-gap: var(--arhix-space-row);
  }
  .menu__item {
    height: var(--arhix-control-height);
    border: 0;
    background: transparent;
    text-align: left;
    border-radius: var(--arhix-radius-control);
    display: flex;
    align-items: center;
    gap: var(--arhix-space-gap);
    padding: 0 8px;
    cursor: pointer;
    color: var(--arhix-ink-muted);
    white-space: nowrap;
    transition: background var(--arhix-motion-quick) ease;
  }
  .menu__item:hover { background: var(--arhix-surface); }
  .menu__item svg { width: var(--arhix-icon-size); height: var(--arhix-icon-size); flex: none; display: block; }
  .menu__label { font-size: var(--arhix-font-size-body); color: var(--arhix-ink); flex: 1 1 auto; padding-right: 12px; }
  /* закон select-меню: ширина ровно по своему полю (ставится JS при
     открытии), border-box — паддинг и кайма не раздувают наружу */
  .menu--select { min-width: 0; box-sizing: border-box; }
  .menu--select .menu__label { padding-right: 0; }
  .menu--compact { min-width: 115px; }
  /* закон радио-меню (масштаб, слой, подложка): текущий пункт отмечает
     галочка, строка не подсвечивается — синяя заливка строки означает
     живой выбор, а не сохранённое состояние */
  .menu--radio .menu__check { visibility: hidden; }
  .menu--radio .menu__item--current .menu__check { visibility: visible; }
  .menu__item .layer-tick { margin-right: 2px; }
  /* Ведущая метка в меню — тот же знак, что в строке списка: меню заодно
     служит легендой стадий. Слева знак стадии, справа галочка текущей —
     разные роли, поэтому оба нужны (как метка слоя и галочка в меню слоёв). */
  .menu__item .item__radio { margin-right: 2px; }
  /* специфичнее, чем «.menu__item svg» с боксом 20 — галочка держит
     свою сетку 14 и нативный рендер, штрих 1.5 без компенсаций.
     Тот же закон, что у метки канваса: мелкий знак идёт на 1.5, а не на
     общие 1.25, иначе читается выцветшим рядом с текстом строки */
  .menu__item svg.menu__check {
    width: 14px; height: 14px; flex: none;
    color: var(--arhix-accent);
  }
  .menu__item--off .menu__check { visibility: hidden; }


  /* Цвет папки — строками с подписью, как стадии в меню канвасов: кружок,
     имя, галочка у текущего. Образец сам по себе состояния не несёт —
     выбор показывает галочка, как во всех радио-меню. */
  .menu__color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: none;
    box-sizing: border-box;
    margin-right: 2px;
  }

  /* «Без цвета» на белом меню сам по себе не виден — держит волосяную кайму */
  .menu__color--none { border: 1px solid var(--arhix-line); }

  .menu__shortcut { font-size: var(--arhix-font-size-body); font-weight: var(--arhix-font-weight-chrome); color: var(--arhix-ink-muted); letter-spacing: 0.5px; }

  /* Меню приложения на бутерброде рейки: тот же мини-остров.
     Пункт с подменю несёт боковой шеврон (канонический глиф, поворот 90°);
     открытое подменю подсвечивает родителя как hover. */
  /* разделитель групп: вровень с текстом строк (8 + паддинг острова 4 = 12),
     а не в кромку пилюли — полный прогон остаётся межзонным разделителям */
  .menu__hr { height: 1px; flex: none; background: var(--arhix-line); margin: var(--arhix-space-micro) var(--arhix-space-gap); }
  .menu__sub-chevron { margin-left: auto; display: flex; color: var(--arhix-ink-muted); }
  .menu__sub-chevron svg { width: var(--arhix-icon-size-compact); height: var(--arhix-icon-size-compact); display: block; }
  .menu__item.is-sub-open { background: var(--arhix-surface); }