/* More flyout (UX-003, components/more-flyout.js): a 240px white panel from the top to the bottom of the
   viewport, flush against the left menu. Rows 42px, 24px icons, 15px text; hover light grey, never blue. */
:root {
  --mf-w: var(--nav-flyout-w);
  --mf-row-h: 42px;
  --mf-hover: #f5f5f7;
  --mf-active-bg: #eeedfc;
  --mf-active-text: #4a3fc4;
  --mf-text: var(--text);
  --mf-icon: #5f6168;
  --mf-open-icon: var(--nav-active);
}

.popover.mf-panel {
  width: var(--mf-w); min-width: 0; box-sizing: border-box; border-radius: 0;
  box-shadow: var(--shadow-popover); overflow-y: auto; overscroll-behavior: contain;
}
.mf-list { display: flex; flex-direction: column; padding: var(--sp-4) 0; }
.mf-item {
  display: flex; align-items: center; gap: var(--sp-5); height: var(--mf-row-h); padding: 0 var(--sp-6) 0 var(--sp-6);
  color: var(--mf-text); font-size: 15px; line-height: 20px; text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast) var(--ease);
}
.mf-item:hover, .mf-item:focus-visible { background: var(--mf-hover); color: var(--mf-text); text-decoration: none; }
.mf-item:focus { outline: none; }
.mf-item:focus-visible { box-shadow: inset 0 0 0 2px var(--border-focus); }
.mf-item.is-active { background: var(--mf-active-bg); color: var(--mf-active-text); font-weight: var(--fw-semibold); }
.mf-item.is-active .mf-ic { color: var(--mf-active-text); }
.mf-ic { width: 24px; height: 24px; flex: none; display: grid; place-items: center; color: var(--mf-icon); }
.mf-ic svg { width: 24px; height: 24px; display: block; }
.mf-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* The ••• button while its flyout is open: white tile, violet dots. */
.nav .nav-item.nav-more.is-open, .nav .nav-item.nav-more.is-open:hover {
  background: var(--bg-surface); color: var(--mf-open-icon);
}

@media (prefers-reduced-motion: reduce) {
  .mf-item { transition: none; }
}