/* ══════════════════════════════════════════════════════════════════
   MENU — the one dropdown in the app

   Every popover list is built from these classes: the workspace switcher,
   the channel switcher, and anything added later. Nothing styles a menu
   from scratch, because that is how two menus end up with different row
   heights, different corners, and — the one that started this file — one
   of them with no gap between its rows, so two highlighted rows touch and
   read as a single block.

   Geometry comes from the tokens in tokens.css:
     --menu-pad --menu-r --menu-row-r --menu-row-pad --menu-row-gap
     --menu-gap --menu-mark
   and --menu-row-r is defined as --menu-r minus --menu-pad, so a
   highlighted row stays concentric with the corner it sits inside.

   Loaded BEFORE light-theme.css. It uses tokens only, so it needs no
   light override at all — and light-theme must not re-state any of this
   geometry, or there are two places to change again.
   ══════════════════════════════════════════════════════════════════ */

/* ── the surface ── */
.menu {
  padding: var(--menu-pad);
  border: 0;                       /* the ring is the first layer of --e-2 */
  border-radius: var(--menu-r);
  background: var(--bg2);
  box-shadow: var(--e-2);
}

/* ── a header: who or what this menu is about ──
   The account menu opens with the person — name, email, and one action on the
   right — and everything under it is a flat list. A menu with a subject reads
   as composed; a menu that opens straight into rows reads as a list someone
   dropped on the page. */
.menu-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px var(--menu-row-pad) 12px;
}
.menu-head-t { flex: 1; min-width: 0; }
.menu-head-t b {
  display: block; font-size: 14px; font-weight: 650; line-height: 1.3; color: var(--tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu-head-t span {
  display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--t4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu-head-act {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 28px; height: 28px; margin-top: -2px;
  border: 0; border-radius: 8px; background: none; color: var(--t3); cursor: pointer;
}
.menu-head-act svg { width: 17px; height: 17px; display: block; }
.menu-head-act:hover { background: var(--bg3); color: var(--tx); }

/* ── the quiet word above a group ── */
.menu-label {
  padding: 8px var(--menu-row-pad) 6px;
  font: 500 11.5px/1 var(--ff-sans);
  color: var(--t4);
  letter-spacing: normal;
  text-transform: none;
}

/* ── the scroll area, when a menu has one ── */
.menu-list { min-height: 0; overflow-y: auto; overflow-x: hidden; }

/* ── the row ──
   Spacing between rows is a margin on the row itself rather than a gap on
   a parent, so it works whether or not the rows are wrapped in a list —
   and a menu cannot be built without it. */
.menu-row {
  display: flex;
  align-items: center;
  gap: var(--menu-gap);
  width: 100%;
  padding: var(--menu-row-pad);
  border: 0;
  border-radius: var(--menu-row-r);
  background: none;
  color: var(--t2);
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.menu-row + .menu-row,
.menu-sep + .menu-row { margin-top: var(--menu-row-gap); }
.menu-row:hover,
.menu-row.hi      { background: var(--bg3); color: var(--tx); }
.menu-row.on      { background: var(--bg3); color: var(--tx); }
.menu-row:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-line); }
.menu-row.hidden  { display: none; }

/* ── the square mark: a glyph, a letter or an avatar ── */
.menu-mark {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--menu-mark);
  height: var(--menu-mark);
  border-radius: 9px;
  overflow: hidden;
  background: var(--bg3);
  color: var(--t3);
  font-size: 12px;
  font-weight: 600;
}
.menu-mark svg { width: 15px; height: 15px; display: block; }
.menu-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Bare: for an action row, where a box around the glyph would make it look
   like one more thing to pick rather than the thing you do. */
.menu-mark.plain { background: none; color: var(--t4); }
.menu-row:hover .menu-mark,
.menu-row.hi .menu-mark { color: var(--t2); }
/* The current row inverts its mark. With the tick, that is the whole of the
   selected state — no accent fill, no bold label. */
.menu-row.on .menu-mark { background: var(--fill, var(--tx)); color: var(--fill-ink); }
.menu-row.on .menu-mark.keep { background: var(--bg3); color: var(--t3); }
/* Workspace marks are pixel art (js/workspace.js _wsMark): scaled down, they
   must keep hard cell edges rather than being smoothed into a blur. */
.menu-mark.keep, .ws-avi { image-rendering: pixelated; }

/* ── the two lines ── */
.menu-meta { flex: 1; min-width: 0; }
.menu-name {
  display: block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--tx);
}
.menu-sub {
  display: block; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; font-weight: 400; line-height: 1.3; color: var(--t4);
}
.menu-row.on .menu-sub { color: var(--t3); }
/* An action row ("Create channel") is one line and carries no weight. */
.menu-row.action .menu-name { font-weight: 500; color: inherit; }

/* ── a row with a trailing action ──
   The action cannot live inside the row, because a button inside a button is
   not a thing. The group owns the highlight so the fill never stops short of
   the action, and the row inside it stays transparent. */
.menu-rowgrp {
  display: flex; align-items: center; gap: 1px;
  border-radius: var(--menu-row-r);
}
.menu-row + .menu-rowgrp,
.menu-rowgrp + .menu-rowgrp,
.menu-rowgrp + .menu-row,
.menu-sep + .menu-rowgrp { margin-top: var(--menu-row-gap); }
.menu-rowgrp > .menu-row { flex: 1; min-width: 0; margin-top: 0; }
.menu-rowgrp:hover { background: var(--bg3); }
.menu-rowgrp:hover > .menu-row,
.menu-rowgrp > .menu-row:hover,
.menu-rowgrp > .menu-row.on { background: none; }
.menu-rowgrp:hover > .menu-row,
.menu-rowgrp > .menu-row.on { color: var(--tx); }
.menu-rowgrp:has(.menu-row.on) { background: var(--bg3); }
.menu-act {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 26px; height: 26px; margin-right: 4px;
  border: 0; border-radius: 7px; background: none; color: var(--t3);
  cursor: pointer; opacity: 0; transition: opacity .12s ease, color .12s ease;
}
.menu-act svg { width: 15px; height: 15px; display: block; }
.menu-rowgrp:hover .menu-act,
.menu-act:focus-visible { opacity: 1; }
.menu-act:hover { color: var(--tx); background: var(--b2); }
/* Tick out, action in — in the same slot, so the row holds its shape. */
.menu-rowgrp:hover .menu-tick, .menu-rowgrp:focus-within .menu-tick { opacity: 0; }
.menu-rowgrp .menu-end .menu-act { position: absolute; inset: 0; margin: 0; width: auto; height: auto; }

/* ── the lean row: a glyph, a label, and one slot on the right ──
   Every row the same height, the right slot always present so nothing shifts
   when a tick gives way to an action on hover. This is the rhythm the account
   menu has and the channel menu did not. */
.menu-row.lean { padding: 9px var(--menu-row-pad); gap: 11px; }
.menu-row.lean .menu-name { font-weight: 500; color: inherit; }
.menu-row.lean.on .menu-name { font-weight: 600; color: var(--tx); }
.menu-ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 18px; height: 18px; color: var(--t4);
}
.menu-ic svg { width: 16px; height: 16px; display: block; }
.menu-row:hover .menu-ic, .menu-row.hi .menu-ic { color: var(--t2); }
.menu-row.on .menu-ic { color: var(--tx); }
/* The slot on the right. It is always there, so the row never reflows. */
.menu-end {
  position: relative; flex: 0 0 auto; margin-left: auto;
  width: 26px; height: 22px; display: grid; place-items: center;
  color: var(--t4);
}
.menu-end svg { width: 15px; height: 15px; display: block; }
.menu-end > * { grid-area: 1 / 1; transition: opacity .12s ease; }
.menu-rowgrp .menu-end { margin-right: 4px; }

.menu-tick { flex-shrink: 0; color: var(--tx); }
.menu-sep  { height: 1px; background: var(--b1); margin: 7px 4px; }
.menu-empty { padding: 22px 12px; text-align: center; font-size: 13px; color: var(--t3); }

/* ── search, for menus long enough to need it ── */
.menu-search {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 0 6px; padding: 0 10px 0 11px; height: 34px;
  border: 1px solid var(--b1); border-radius: 9px; background: var(--bg);
}
.menu-search:focus-within { border-color: var(--b3, var(--b2)); }
.menu-search > svg { width: 15px; height: 15px; color: var(--t4); flex-shrink: 0; }
.menu-search input,
.menu-search input:focus {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; box-shadow: none; background: none;
  color: var(--tx); font-family: inherit; font-size: 13px;
}
.menu-search input::placeholder { color: var(--t4); }