/* Smart menu — portable styles, no theme overrides.
   Relies on tokens defined by the host page's stylesheet
   (--bg, --bg-2, --fg, --fg-bright, --fg-dim, --fg-faint, --fg-ghost,
    --magenta, --font-mono). */

.menu-wrap { position: relative; display: inline-flex; align-items: center; }
.menu-trigger {
  background: transparent; border: 1px solid var(--fg-ghost);
  color: var(--fg-dim);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .15s, border-color .15s, background .15s;
}
.menu-trigger:hover, .menu-trigger[data-open="true"] {
  color: var(--fg-bright); border-color: var(--blue);
  background: rgba(30,120,210,0.06);
}
.menu-trigger-glyph { font-size: 14px; line-height: 1; }
.menu-trigger-label { letter-spacing: 0.14em; }
@media (max-width: 520px) {
  .menu-trigger-label { display: none; }
  .menu-trigger { padding: 4px 8px; }
}
/* Touch devices: keep the visual size but guarantee a 44px tap target
   (pseudo-element hit-area; does not affect layout / statusbar height) */
@media (pointer: coarse) {
  .menu-trigger { position: relative; }
  .menu-trigger::after {
    content: ''; position: absolute;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 100%; min-width: 48px; height: 48px;
  }
}

.menu-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: min(380px, calc(100vw - 32px));
  background: var(--bg-2);
  border: 1px solid var(--fg-faint);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px var(--fg-ghost) inset;
  font-family: var(--font-mono);
  animation: menu-fade .14s ease-out;
  max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
}
@keyframes menu-fade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.menu-panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--fg-ghost);
  font-size: 12px;
  color: var(--fg-dim);
}
.menu-panel-head .mag { color: var(--magenta); }
.menu-panel-head .faint { color: var(--fg-faint); }
.menu-panel-body {
  overflow-y: auto;
  flex: 1;
  padding: 6px 0;
}
.menu-group { padding: 0 0 4px; }
.menu-section {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-faint);
  padding: 10px 16px 6px;
}
.menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  font-size: 13px; color: var(--fg);
  border: 0; border-bottom: 0;
  border-left: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0;
  text-transform: none;
  transition: background .12s, color .12s, border-color .12s;
}
.menu-item:hover {
  background: rgba(30,120,210,0.12);
  color: var(--blue);
  border-left-color: var(--blue);
}
.menu-item .glyph {
  display: inline-block; width: 16px; color: var(--fg-faint); font-size: 12px;
}
.menu-item:hover .glyph { color: var(--blue); }
.menu-item:hover .label { color: var(--blue); }
.menu-item:hover .meta { color: var(--blue); }
.menu-item .label { flex: 1; min-width: 0; }
.menu-item .meta {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-faint);
}
.menu-panel-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px;
  border-top: 1px solid var(--fg-ghost);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--magenta);
}
.menu-panel-foot .kbd {
  font-family: var(--font-mono); font-size: 10px; padding: 1px 5px;
  border: 1px solid var(--magenta); border-radius: 2px; color: var(--magenta);
  margin: 0 2px;
}

/* admin entry link — discrete with a magenta tick */
.admin-link {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-dim);
  border: 1px solid var(--fg-ghost);
  padding: 4px 10px;
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.admin-link:hover {
  color: var(--blue); border-color: var(--blue);
  background: rgba(30, 120, 210, 0.06);
}

/* hide inline statusbar quick-nav on narrow screens (menu covers it) */
@media (max-width: 760px) {
  .statusbar-right .quick-nav { display: none; }
}