/*
 * context-menu.css — THE right-click menu, styled once.
 *
 * Paired with spa/context-menu.js. Schematic Studio, Visual Design and Site
 * Docs all render into netdoc.html, so this file is the ONLY place a context
 * menu is styled and there is no second copy to drift. Schematic Studio's
 * React component renders these same class names.
 *
 * The house style is Schematic Studio's, by JP's call (2026-08-20): 13px
 * items, a right-aligned monospaced shortcut column, headings that wrap,
 * destructive items in --r after a separator, and disabled-with-a-reason
 * rather than hidden.
 *
 * Tokens only — no literal colours. See docs/standards/10-design-system.md.
 */
/* Anything new that offers a right-click menu uses these classes. */
/* NO OVERFLOW ON THE BASE CLASS. `overflow-y:auto` forces overflow-x to
   auto/hidden as well — always, not only when the panel actually scrolls — and
   a submenu sits OUTSIDE its parent's box by definition, at left:100%. Putting
   it here clipped every submenu on every surface, including Schematic Studio's
   connect-to-port list, while `toBeVisible()` still passed because a clipped
   element keeps its bounding box. Hit-testing caught it; the test now does
   that. */
.cm{position:fixed;z-index:600;min-width:240px;max-width:340px;padding:4px;
  /* border-box, not inherited: with content-box the 4px padding and 1px border
     are ADDED to max-height, so the panel ends up ~18px taller than the limit
     and its last row sits below the fold — measured at 902px in a 900px
     viewport. A component must not depend on the host page having a reset. */
  box-sizing:border-box;
  display:flex;flex-direction:column;background:var(--s1);border:1px solid var(--b1);
  border-radius:var(--r8);box-shadow:0 8px 24px rgba(0,0,0,.45);font-family:var(--sans)}
/* Scrolling goes where it cannot clip a submenu.
   A ROOT menu scrolls only when it holds no submenu — placement pins a too-tall
   menu to the top edge, and without this its tail is simply unreachable.
   A SUBMENU always scrolls: it is the long list (48 ports), and it contains no
   further submenu to clip.
   KNOWN LIMIT, stated rather than hidden: a root menu that BOTH exceeds the
   viewport AND has a submenu still cannot scroll. Fixing that needs submenus
   rendered at the document root with computed coordinates, in both the vanilla
   and the React renderer — a bigger change than this one, and no such menu
   exists today. */
.cm-ctx:not(:has(.cm-row.has-sub)){max-height:calc(100vh - 16px);overflow-y:auto}
.cm-sub{max-height:calc(100vh - 16px);overflow-y:auto}
/* A row must not be squashed by the flex column when the panel scrolls. */
.cm-row,.cm-hd,.cm-sep{flex:none}
.cm-row{position:relative;display:flex}
.cm-item{flex:1;display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;
  box-sizing:border-box;
  font-family:var(--sans);font-size:13px;text-align:left;color:var(--t0);background:none;
  border:0;border-radius:var(--r3);cursor:pointer}
.cm-item:hover:not(:disabled){background:var(--s2)}
.cm-item:focus-visible{outline:2px solid var(--a);outline-offset:-2px}
.cm-item:disabled{color:var(--t3);cursor:default}
.cm-item:disabled .cm-label{color:var(--t3)}
.cm-item.is-danger{color:var(--r)}
.cm-item.is-danger:hover:not(:disabled){background:var(--rd,var(--s2))}
.cm-label{flex:1;min-width:0}
/* Right-aligned, monospaced: a shortcut, or — when the item is disabled — the
   reason it is. The answer to "why can't I do this" belongs on screen, not
   only in a tooltip nobody hovers long enough to see. */
.cm-keys{font-family:var(--mono);font-size:11.5px;color:var(--t3);margin-left:12px;
  white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.cm-caret{color:var(--t3);font-size:12px}
.cm-swatch{display:inline-flex;color:var(--t1)}
.cm-sep{height:1px;background:var(--b0);margin:4px 6px}
/* A heading WRAPS rather than truncating. "Connect to AXIS A1001 - Back
   Entrance — which port?" is uppercase, monospaced and letter-spaced, the
   least compact combination there is; truncating cut the one thing the menu
   existed to say. */
.cm-hd{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t3);padding:6px 10px 2px;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.cm-sub{position:absolute;top:0}
.cm-sub.to-right{left:100%}
.cm-sub.to-left{right:100%}
body.light .cm{box-shadow:0 12px 30px rgba(15,28,49,.18)}