/* 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: var(--arhix-space-micro);
  }
  .menu.is-open { display: block; }
  .menu[data-ui-menu-covered="true"] { display: none; }
  .menu[data-ui-menu-compact="true"] {
    box-sizing: border-box;
    min-width: min(var(--arhix-menu-min-width), calc(100vw - 2 * var(--arhix-space-gap)));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .menu[data-ui-menu-compact="true"] .menu__item {
    min-height: var(--arhix-control-height);
    height: auto;
    flex-shrink: 0;
  }
  .menu[data-ui-menu-compact="true"] .menu__label { white-space: normal; }
  .menu__back[hidden] { display: none; }
  .menu__back-button { width: 100%; }
  .menu__back-chevron { display: flex; transform: rotate(90deg); }
  .menu__back .menu__hr { display: block; }
  .menu__list { display: flex; flex-direction: column; gap: var(--arhix-space-row); }
  [data-ui-surface="shell"][data-ui-layout="compact"] [data-ui-file-action="create-image-file"] { display: none; }
  .menu--cols .menu__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(calc(168 * var(--arhix-ui-unit)), 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 var(--arhix-space-gap);
    cursor: pointer;
    color: var(--arhix-ink-muted);
    white-space: nowrap;
    transition: background var(--arhix-motion-quick) ease;
  }
  .menu__item:hover:not(:disabled, [aria-disabled="true"]) { background: var(--arhix-surface); }
  .menu__item:is(:disabled, [aria-disabled="true"]) {
    color: var(--arhix-ink-ghost);
    cursor: default;
  }
  .menu__item:is(:disabled, [aria-disabled="true"]) :is(.menu__label, .menu__shortcut, .menu__check) { color: inherit; }
  .menu__item:is(:disabled, [aria-disabled="true"]) .inspector-layer-tick { opacity: 0.4; }
  .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: var(--arhix-space-block); }
  .menu__note {
    min-height: var(--arhix-control-height);
    display: flex;
    align-items: center;
    padding: 0 var(--arhix-space-gap);
    font-size: var(--arhix-font-size-body);
    color: var(--arhix-ink-muted);
  }
  /* закон select-меню: ширина ровно по своему полю (ставится JS при
     открытии), border-box — паддинг и кайма не раздувают наружу */
  .menu--select { min-width: 0; box-sizing: border-box; }
  .menu--select .menu__label { padding-right: 0; }
  .menu--compact { min-width: calc(115 * var(--arhix-ui-unit)); }
  /* закон радио-меню (масштаб, слой, подложка): текущий пункт отмечает
     галочка, строка не подсвечивается — синяя заливка строки означает
     живой выбор, а не сохранённое состояние */
  .menu--radio .menu__check { visibility: hidden; }
  .menu--radio .menu__item--current .menu__check { visibility: visible; }
  .menu__item .layer-tick { margin-right: var(--arhix-space-pill); }
  /* Ведущая метка в меню — тот же знак, что в строке списка: меню заодно
     служит легендой стадий. Слева знак стадии, справа галочка текущей —
     разные роли, поэтому оба нужны (как метка слоя и галочка в меню слоёв). */
  .menu__item .item__radio { margin-right: var(--arhix-space-pill); }
  /* специфичнее, чем «.menu__item svg» с боксом 20 — галочка держит
     свою сетку 14 и нативный рендер, штрих 1.5 без компенсаций.
     Тот же закон, что у метки канваса: мелкий знак идёт на 1.5, а не на
     общие 1.25, иначе читается выцветшим рядом с текстом строки */
  .menu__item svg.menu__check {
    width: var(--arhix-check-size); height: var(--arhix-check-size); flex: none;
    color: var(--arhix-accent);
  }
  .menu__item--off .menu__check { visibility: hidden; }


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

  /* «Без цвета» на белом меню сам по себе не виден — держит волосяную кайму */
  .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: calc(0.5 * var(--arhix-ui-unit)); }

  /* Меню приложения на бутерброде рейки: тот же мини-остров.
     Пункт с подменю несёт боковой шеврон (канонический глиф, поворот 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); }