/* ============================================================
   SufloMenu — unified menu system (monochrome, DAW-native).
   Colours/font mirror the channel-rack #cr-context-menu the user
   endorsed: true black #111, #2a2a2a border, mono text. Flat, dense,
   minimal — NOT a web dropdown. Greyscale only; selection = white.
   Classes namespaced `sfm-*`. Tokens scoped to .sfm-layer.
   Source of truth: docs/menu-system-example.html
   ============================================================ */
.sfm-layer{
  position:fixed; inset:0; z-index:100000; pointer-events:none;

  /* Matches the channel-rack #cr-context-menu the user endorsed:
     true black #111 (no tint), #2a2a2a border, mono (JetBrains/Consolas). */
  --sfm-font:'JetBrains Mono','Fira Code',monospace;

  --sfm-bg:#111;                            /* true black, no tint */
  --sfm-border:#2a2a2a;                      /* endorsed border highlight */
  --sfm-fg:#ccc;                             /* resting label */
  --sfm-fg-bright:#FFFFFF;                  /* hover + selected label */
  --sfm-fg-muted:rgba(255,255,255,.40);     /* suffix / shortcut / echo */
  --sfm-fg-disabled:rgba(255,255,255,.22);
  --sfm-section:rgba(255,255,255,.34);      /* uppercase headers */
  --sfm-hover:rgba(255,255,255,.09);        /* full-bleed hover bar */
  --sfm-active:rgba(255,255,255,.13);       /* open-parent / pressed */
  --sfm-selected:rgba(255,255,255,.05);     /* checked-row tint */
  --sfm-separator:rgba(255,255,255,.09);
  --sfm-caret:rgba(255,255,255,.45);
  --sfm-danger:#E0736E;                     /* destructive rows ONLY */
  --sfm-scroll-thumb:rgba(255,255,255,.18);
  --sfm-scroll-thumb-hover:rgba(255,255,255,.32);

  --sfm-radius:4px;                         /* match cr-context-menu */
  --sfm-row-h:25px;
  --sfm-gutter:24px;                        /* check / icon column */
  --sfm-shadow:0 4px 14px rgba(0,0,0,.5);
}

.sfm{
  position:fixed; pointer-events:auto;
  min-width:180px; max-width:360px;
  background:var(--sfm-bg);
  border:1px solid var(--sfm-border);
  border-radius:var(--sfm-radius);
  box-shadow:var(--sfm-shadow);
  padding:4px 0;                            /* full-bleed rows: no side padding */
  font-family:var(--sfm-font); font-weight:400;
  animation:sfm-fade 70ms linear;           /* no scale/translate pop */
  overflow:hidden;
}
.sfm.sfm-sub{min-width:150px}
.sfm.sfm-no-anim{animation:none}
@keyframes sfm-fade{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .sfm{animation:none} }

.sfm-scroll{max-height:inherit; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:var(--sfm-scroll-thumb) transparent}
.sfm-scroll::-webkit-scrollbar{width:8px}
.sfm-scroll::-webkit-scrollbar-track{background:transparent}
.sfm-scroll::-webkit-scrollbar-thumb{background:var(--sfm-scroll-thumb); border-radius:4px; border:2px solid transparent; background-clip:content-box}
.sfm-scroll::-webkit-scrollbar-thumb:hover{background:var(--sfm-scroll-thumb-hover); background-clip:content-box}

/* fade masks when scrollable */
.sfm.sfm-scrollable::before,.sfm.sfm-scrollable::after{
  content:''; position:absolute; left:1px; right:9px; height:20px; pointer-events:none; z-index:2; opacity:0; transition:opacity .15s;
}
.sfm.sfm-scrollable::before{top:4px; background:linear-gradient(var(--sfm-bg),rgba(17,17,17,0))}
.sfm.sfm-scrollable::after{bottom:4px; background:linear-gradient(rgba(17,17,17,0),var(--sfm-bg))}
.sfm.sfm-can-up::before{opacity:1}
.sfm.sfm-can-down::after{opacity:1}

.sfm-item{
  position:relative; display:flex; align-items:center;
  height:var(--sfm-row-h); padding:0 12px 0 var(--sfm-gutter);
  color:var(--sfm-fg); font-size:13px; letter-spacing:0; line-height:1;
  cursor:pointer; white-space:nowrap; user-select:none;
  transition:background .02s linear, color .06s linear;
}
.sfm-item .sfm-lbl{overflow:hidden; text-overflow:ellipsis}
.sfm-suffix{color:var(--sfm-fg-muted); margin-left:6px; font-size:12px}
.sfm-right{margin-left:auto; display:flex; align-items:center; gap:10px; padding-left:22px}
.sfm-echo{color:var(--sfm-fg-muted); font-size:12px}
.sfm-sc{color:var(--sfm-fg-muted); font-size:11.5px}
.sfm-caret{color:var(--sfm-caret); display:flex; margin-right:-1px}
.sfm-check{position:absolute; left:6px; top:50%; transform:translateY(-50%); color:var(--sfm-fg-bright); display:none}
.sfm-ico{position:absolute; left:5px; top:50%; transform:translateY(-50%); color:var(--sfm-fg-muted); display:flex; font-size:14px; line-height:1}
.sfm-item.sfm-checked .sfm-check{display:flex}
.sfm-item.sfm-checked .sfm-ico{display:none}
.sfm-item.sfm-checked .sfm-lbl{color:var(--sfm-fg-bright)}

.sfm-item:hover,.sfm-item.sfm-hl{background:var(--sfm-hover); color:var(--sfm-fg-bright)}
.sfm-item:hover .sfm-caret,.sfm-item.sfm-hl .sfm-caret{color:#fff}
.sfm-item:hover .sfm-ico,.sfm-item.sfm-hl .sfm-ico{color:#dfe0e3}
.sfm-item.sfm-open{background:var(--sfm-active); color:var(--sfm-fg-bright)}
.sfm-item.sfm-open .sfm-caret{color:#fff}
.sfm-item.sfm-selrow{background:var(--sfm-selected)}
.sfm-item.sfm-danger{color:var(--sfm-danger)}
.sfm-item.sfm-danger:hover,.sfm-item.sfm-danger.sfm-hl{background:rgba(224,115,110,.14); color:#f2a09c}
.sfm-item.sfm-disabled{color:var(--sfm-fg-disabled); pointer-events:none}

.sfm-header{
  padding:7px 12px 4px var(--sfm-gutter); color:var(--sfm-section);
  font-size:11px; font-weight:500; letter-spacing:.01em;
}
.sfm-sep{height:1px; background:var(--sfm-separator); margin:4px 0}