/* Thin horizontal site menu under the WIP bar */
.site-menu {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in lab, var(--panel) 96%, var(--text) 4%), color-mix(in lab, var(--panel) 90%, var(--text) 10%));
  box-shadow:
    inset 0 1px 0 color-mix(in lab, var(--text) 6%, transparent),
    inset 0 -1px 0 color-mix(in lab, var(--bg) 8%, transparent);
}
.site-menu .wrap {
  max-width: 980px;
  margin: 0 auto;
  /* Reduce vertical padding to make the bar thinner */
  padding: 2px 20px;
  display: flex;
  /* Ensure buttons are aligned to the left */
  justify-content: flex-start;
  gap: 8px;
}

/* Bevelled menu buttons */
.menu-btn {
  appearance: none;
  display: inline-block;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(180deg, var(--chip-bg-start), var(--chip-bg-end));
  border: 1px solid var(--border);
  /* Slightly reduce vertical padding for a slimmer button */
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
  box-shadow:
    /* tiny outer drop for lift */ 0 1px 0 rgba(0,0,0,0.2),
    /* subtle inner rim for bevel */ inset 0 1px 0 color-mix(in lab, var(--text) 10%, transparent),
    inset 0 -1px 0 color-mix(in lab, var(--bg) 14%, transparent);
}
.menu-btn:hover {
  transform: translateY(-1px);
  border-color: #2d3350;
}
[data-theme="light"] .menu-btn:hover {
  border-color: #cbd5e1;
}
.menu-btn:active {
  transform: translateY(0);
  background: linear-gradient(180deg, var(--chip-bg-end), var(--chip-bg-start));
  box-shadow:
    0 0 0 rgba(0,0,0,0),
    inset 0 1px 0 color-mix(in lab, var(--bg) 10%, transparent),
    inset 0 -1px 0 color-mix(in lab, var(--text) 10%, transparent);
}
.menu-btn:focus {
  outline: 2px solid color-mix(in lab, var(--accent) 60%, transparent);
  outline-offset: 2px;
}

/* Light theme background tuning */
[data-theme="light"] .site-menu {
  background: linear-gradient(180deg, color-mix(in lab, var(--panel) 98%, var(--text) 2%), color-mix(in lab, var(--panel) 94%, var(--text) 6%));
}