/*
 * Menus (INVENTORY §4) and the Start menu (S11, S12): menu bar, popup menus, cascades, context menus.
 * Measured on ps7_menu_edit_transform.png (system menus of a Win2k app), win2k-pro_menu_start.png and
 * win2k-pro_menu_start_programs-accessories.png — SPEC.md §4.4. Built by js/components/menu.js.
 *
 * Popup variants (data-icons on .w2k-menu):
 *   none — text items 17px, text pen 20 from the popup's outer left edge, line top 1;
 *   16   — Start submenus: 20px items, 16×16 icon at (2, 2), text pen 27 from the item's left, line top 4;
 *   32   — Start menu: 32px items after the 21px banner, 32×32 icon at (2, 0), text pen 43, line top 10.
 */

.w2k-menu {
  position: absolute;
  z-index: 2000000;
  display: flex;
  flex-direction: column;
  min-width: var(--metric-menu-min-width);
  padding: var(--metric-menu-frame);
  background: var(--sys-menu);
  box-shadow: var(--edge-raised);
  color: var(--sys-menu-text);
  font: var(--font-menu);
  user-select: none;
  cursor: var(--cursor-normal-select, default);
  --item-h: var(--metric-menu-item-height);
  --text-left: var(--metric-menu-text-left);
  --text-top: var(--metric-menu-text-top);
  --arrow-size: var(--metric-menu-arrow-size);
  --arrow-right: var(--metric-menu-arrow-right);
  --arrow-font: var(--font-glyph-menu-arrow);
}
.w2k-menu[data-icons="16"] {
  --item-h: var(--metric-startmenu-subitem-height);
  --text-left: var(--metric-menu16-text-left);
  --text-top: var(--metric-menu16-text-top);
}
.w2k-menu[data-icons="32"], .w2k-menu[data-icons="16"] {
  /* Start menus: 13 ppem arrow in a 13×13 cell at the inner right edge (measured). */
  --arrow-size: 13px;
  --arrow-right: 0px;
  --arrow-font: var(--font-glyph-check);
}
.w2k-menu[data-icons="32"] {
  --item-h: var(--metric-startmenu-item-height);
  --text-left: var(--metric-menu32-text-left);
  --text-top: var(--metric-menu32-text-top);
  flex-direction: row;
}
.w2k-menu[data-icons="32"] > .w2k-menu__items { display: flex; flex-direction: column; flex: 1; }

/* Start-menu banner: the brand bitmap bottom-aligned on a filled column. */
.w2k-menu__banner {
  flex: none;
  width: var(--metric-startmenu-banner-width);
  background: var(--banner-fill, #000) var(--banner-image) no-repeat left bottom;
}

.w2k-menu__item {
  position: relative;
  flex: none;
  height: var(--item-h);
  padding-right: var(--metric-menu-text-right);
  white-space: pre;
  outline: none;
}
.w2k-menu__item[data-tall] { height: calc(var(--item-h) + 1px); }   /* Windows Update item (measured 33px) */
.w2k-menu__text {
  position: absolute;
  left: var(--text-left);
  top: var(--text-top);
}
.w2k-menu__icon {
  position: absolute;
  left: var(--metric-menu-icon-left);
  top: var(--metric-menu16-icon-top);
  width: 16px;
  height: 16px;
}
.w2k-menu[data-icons="32"] .w2k-menu__icon { top: 0; width: 32px; height: 32px; }
.w2k-menu__accel {
  position: absolute;
  right: var(--metric-menu-accel-right);
  top: var(--text-top);
}
/* Check / radio mark: Marlett "a" / "h" in the left column (knowledge; position to confirm). */
.w2k-menu__check {
  position: absolute;
  left: var(--metric-menu-check-left);
  top: round(down, (var(--item-h) - 13px) / 2, 1px);
  font: var(--font-glyph-check);
}
/* Submenu arrow: Marlett "8" in a square cell, vertically centered (floor) — size and margin per variant. */
.w2k-menu__arrow {
  position: absolute;
  right: var(--arrow-right);
  top: round(down, (var(--item-h) - var(--arrow-size)) / 2, 1px);
  width: var(--arrow-size);
  height: var(--arrow-size);
  font: var(--arrow-font);
}
.w2k-menu__arrow::before { content: "8"; }

/* Hot (selected) item: Hilight over the full inner width. */
.w2k-menu__item[data-hot] { background: var(--color-row-hilight, var(--sys-hilight)); color: var(--color-row-hilight-text, var(--sys-hilight-text)); }
.w2k-menu__item[aria-disabled="true"] { color: var(--sys-gray-text); }
.w2k-menu__item[aria-disabled="true"]:not([data-hot]) > :is(.w2k-menu__text, .w2k-menu__accel, .w2k-menu__arrow, .w2k-menu__check) {
  text-shadow: 1px 1px 0 var(--color-disabled-emboss);
}
.w2k-menu__item[data-default] { font: var(--font-ui-bold); }

.w2k-menu__separator {
  position: relative;
  flex: none;
  height: var(--metric-menu-separator-height);
}
.w2k-menu__separator::before {
  content: "";
  position: absolute;
  left: var(--metric-menu-separator-inset-left);
  right: var(--metric-menu-separator-inset-right);
  top: var(--metric-menu-separator-top);
  height: 2px;
  background: var(--edge-etched-h);
}
.w2k-menu[data-icons="32"] .w2k-menu__separator,
.w2k-menu[data-icons="16"] .w2k-menu__separator { height: var(--metric-startmenu-separator-height); }
.w2k-menu[data-icons="32"] .w2k-menu__separator::before { left: 2px; right: 2px; }   /* measured in the Start menu */

/* Mnemonics are drawn only while keyboard cues are shown. */
.w2k-menu .w2k-mnemonic, .w2k-menubar .w2k-mnemonic { text-decoration: underline; text-underline-offset: 1px; text-decoration-skip-ink: none; }
html[data-cues="hidden"] :is(.w2k-menu, .w2k-menubar) .w2k-mnemonic { text-decoration: none; }
html[data-cues="hidden"] :is(.w2k-menu, .w2k-menubar) .w2k-mnemonic[data-always] { text-decoration: underline; }   /* MMC's menu band */

/* Menu open effects (Effects tab): fade, or scroll — unrolled the way the menu opens (data-opening, js/components/menu.js):
   down from a menu bar or a point, up above the Start button, sideways for a submenu. */
html[data-menu-animation="fade"] .w2k-menu[data-opening] { animation: w2k-menu-fade var(--duration-menu) linear; }
html[data-menu-animation="scroll"] .w2k-menu[data-opening="down"] { animation: w2k-menu-scroll-down var(--duration-menu) linear; }
html[data-menu-animation="scroll"] .w2k-menu[data-opening="up"] { animation: w2k-menu-scroll-up var(--duration-menu) linear; }
html[data-menu-animation="scroll"] .w2k-menu[data-opening="right"] { animation: w2k-menu-scroll-right var(--duration-menu) linear; }
html[data-menu-animation="scroll"] .w2k-menu[data-opening="left"] { animation: w2k-menu-scroll-left var(--duration-menu) linear; }
@keyframes w2k-menu-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes w2k-menu-scroll-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes w2k-menu-scroll-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes w2k-menu-scroll-right { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes w2k-menu-scroll-left { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

/* ── Menu bar (HMENU in a window): items = text + 6px each side, 1px raised when selected by keyboard, 1px sunken
   while open, text +1,+1 when open (measured on the Photoshop menu bar). ──────────────────────────────────── */
.w2k-menubar {
  position: relative;
  display: flex;
  flex: none;
  height: var(--metric-menubar-height);
  background: var(--sys-menu);
  color: var(--sys-menu-text);
  font: var(--font-menu);
  user-select: none;
}
.w2k-menubar__item {
  position: relative;
  display: block;
  height: var(--metric-menubar-item-height);
  margin-top: var(--metric-menubar-item-top);
  padding: var(--metric-menubar-text-top) var(--metric-menubar-item-padding) 0;
  line-height: var(--line-height-ui);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: pre;
  outline: none;
  cursor: inherit;
}
.w2k-menubar__item > span { position: relative; }
/* Hot: raised 1px — under the pointer too, in every menu bar (user, 2026-10-10: system-wide, as Business Manager's
   and Internet Explorer's menu band; TODO F-4). In a rebar's band: rebar.css. */
.w2k-menubar__item:is([data-hot], :not([aria-disabled="true"], [aria-expanded="true"]):hover) { box-shadow: var(--edge-raised-inner); }
.w2k-menubar__item[aria-expanded="true"] { box-shadow: var(--edge-sunken-outer); }
.w2k-menubar__item[aria-expanded="true"] > span { left: 1px; top: 1px; }
.w2k-menubar__item[aria-disabled="true"] { color: var(--color-disabled-text); text-shadow: 1px 1px 0 var(--color-disabled-emboss); }   /* embossed (Display › Appearance preview) */

/* Personalized menus (S13, knowledge): the chevron row and the lighter background of rarely used items. */
.w2k-menu__chevron { height: var(--metric-menu-chevron-height); padding: 0; }
.w2k-menu__chevron-glyph {
  position: absolute;
  left: round(down, (100% - 5px) / 2, 1px);
  top: round(down, (var(--metric-menu-chevron-height) - 7px) / 2, 1px);
  fill: currentColor;
}
.w2k-menu__item[data-rarely]:not([data-hot]) { background: var(--color-menu-rarely-used); }