/* ECO component CSS: menu. Shared by the docs page (eco-design-system/components/menu.html) and every prototype/product page.
   Skill: eco-menu. Link it, do not copy it: <link rel="stylesheet" href="/components/css/menu.css">
   [data-state="…"] selectors only serve the docs pages' forced-state demos; they are inert elsewhere. Tokens only. */
    /* ── Menu: the list surface of a Dropdown menu and an Exposed dropdown menu. Mobile-first, desktop from 769px. ── */
    .menu {
      --menu-row: 40px; --menu-fs: 16px; --menu-lh: 22px; --menu-icon: 20px; /* Large, mobile */
      display: flex; width: 100%; background: var(--color-surface-raised-primary);
      box-shadow: var(--shadow-elevation-b-80);
    }
    .menu--sm { --menu-row: 32px; --menu-fs: 14px; --menu-lh: 20px; }
    .menu__items {
      flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none;
      max-height: calc(14 * var(--menu-row)); overflow-y: auto; /* 14 rows visible, then scroll */
      scrollbar-width: thin; scrollbar-color: var(--color-surface-30) var(--color-surface-02);
    }
    .menu__items::-webkit-scrollbar { width: 12px; }
    .menu__items::-webkit-scrollbar-track { background: var(--color-surface-02); border-left: 1px solid var(--color-border-primary); }
    .menu__items::-webkit-scrollbar-thumb { background: var(--color-surface-30); border: 2px solid transparent; background-clip: padding-box; border-radius: 4px; } /* 4px = Figma handle radius, no radius token */

    .menu__item {
      position: relative; display: flex; align-items: center; gap: var(--dimension-spacing-space-8);
      box-sizing: border-box; min-height: var(--menu-row); padding: 0 var(--dimension-spacing-space-16);
      cursor: pointer; color: var(--color-text-primary);
      font-family: 'Breuer Condensed', sans-serif; font-feature-settings: 'ss02' 1, 'ss03' 1, 'ss06' 1;
      font-size: var(--menu-fs); font-weight: 400; line-height: var(--menu-lh); letter-spacing: 0.32px;
    }
    .menu--sm .menu__item { letter-spacing: 0.36px; }
    .menu__item::after { content: ''; position: absolute; left: var(--dimension-spacing-space-16); right: var(--dimension-spacing-space-16); bottom: 0; height: 1px; background: var(--color-border-secondary); } /* Middle-inset */
    .menu--full .menu__item::after { left: 0; right: 0; }
    .menu--none .menu__item::after { display: none; }
    .menu__item-label { flex: 1; min-width: 0; }
    .menu__item:is(:hover, [data-state="hover"]):not([aria-disabled="true"]) { background: var(--color-surface-navigation-hover); }
    .menu__item:is(:focus-visible, [data-state="focus"]) { outline: 2px solid var(--color-border-focus); outline-offset: -2px; }
    .menu__item:is(:focus-visible, [data-state="focus"])::after { display: none; } /* the row's divider would paint over the bottom edge of the ring */
    /* Opened with the mouse: the row that gets focus programmatically shows no ring until a key is pressed (select-menu.js sets and clears data-input) */
    .menu[data-input="pointer"] .menu__item:focus-visible { outline: none; }
    .menu[data-input="pointer"]:not(.menu--none) .menu__item:focus-visible::after { display: block; }

    /* Icon: Select shows it only when selected, Multi Select always */
    .menu__item-icon { flex: none; width: var(--menu-icon); height: var(--menu-icon); user-select: none; }
    .menu__item-icon::before {
      content: 'circle'; font-family: 'Material Symbols Outlined'; font-size: var(--menu-icon); line-height: 1;
      font-weight: normal; font-style: normal; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr;
      font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; color: var(--color-text-action-tertiary);
    }
    .menu:not(.menu--multi) .menu__item:not([aria-selected="true"]) .menu__item-icon { display: none; }
    .menu__item[aria-selected="true"] .menu__item-icon::before { content: 'check_circle'; color: var(--color-text-action-primary); }
    .menu--multi .menu__item:is(:hover, [data-state="hover"]):not([aria-selected="true"], [aria-disabled="true"]) .menu__item-icon::before { content: 'check_circle'; color: var(--color-text-action-tertiary); }
    /* Disabled (not in Figma, derived from eco-select): disabled text and icon, no hover, no pointer */
    .menu__item[aria-disabled="true"] { color: var(--color-text-disabled); cursor: not-allowed; }
    .menu__item[aria-disabled="true"] .menu__item-icon::before { color: var(--color-text-disabled); }

    /* Desktop (769px and up): Large 48px, Small 40px */
    @media (min-width: 769px) {
      .menu { --menu-row: 48px; --menu-fs: 17px; --menu-lh: 24px; --menu-icon: 24px; }
      .menu--sm { --menu-row: 40px; --menu-fs: 14px; --menu-lh: 20px; --menu-icon: 20px; }
    }